HTML5中的Canvas绘图操作（三）
本节主要内容是组合图形的绘制。
简单的一个阴影绘制如下：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Shadows</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// set up our basic shadow settings
ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
// draw a simple rectangle with a shadow effect
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillRect(20,20,200,100);
var theString = "Drawing Text on a Canvas";
// draw the string with some font information
// change the shadow settings to be a bit lighter
ctx.fillStyle = "green";
ctx.shadowColor = "rgba(0,100,100,0.5)";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.font = "25pt Georgia";
ctx.fillText(theString, 250,75);
// draw a red line with a purplish shadow
ctx.lineCap="round";
ctx.lineWidth = 25;
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(450,200);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Shadows</h1>
<p>All drawing operations can produce shadows. This example shows how to make shadows on a variety of canvas operations.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
实际上需要注意的主要是设置如下内容：
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
分别设置了阴影的颜色、污迹、偏移量；
下面是一个使用图案的例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from another canvas
var patCanvas = document.getElementById('patCan');
var patCtx = patCanvas.getContext("2d");
// draw a line in the canvas
patCtx.strokeStyle = "red";
patCtx.lineWidth=1;
patCtx.beginPath();
patCtx.moveTo(0,0);
patCtx.lineTo(25,25);
patCtx.stroke();
// now use that canvas as a pattern
var strokePat = ctx.createPattern(patCanvas,"repeat");
ctx.strokeStyle = strokePat;
ctx.lineWidth = 25;
ctx.strokeRect(50,50,200,200);
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
另一个使用图案的例子，使用图像填充：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from an image
var patImg = new Image();
patImg.onload = function() {
ctx.fillStyle = ctx.createPattern(patImg,"repeat");
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
patImg.src = "images/desert_desc_bug.gif";
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
使用渐变色，分别是直线式的渐变和辐射状的渐变，以下例子展示了其中的差别：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Gradients</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a linear gradient
var linGrd = ctx.createLinearGradient(20,20,220,280);
// add some color stops: red to blue, blue to green
linGrd.addColorStop(0, "#f00"); // start with red at 0
linGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
linGrd.addColorStop(1,"#0f0"); // finish with green
// create a rectangle and fill it with the gradient
ctx.fillStyle = linGrd;
ctx.fillRect(20,20,200,260);
ctx.lineWidth = 3;
ctx.strokeRect(20,20,200,260);
// create a radial gradient
var radGrd = ctx.createRadialGradient(500,100,20,525,150,100);
radGrd.addColorStop(0, "#f00"); // start with red at 0
radGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
radGrd.addColorStop(1,"#0f0"); // finish with green
ctx.fillStyle = radGrd;
ctx.beginPath();
ctx.arc(525,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();
}
}
}
</script>
</head>
<body>
<h1>Drawing Gradients</h1>
<p>The HTML5 Canvas supports two kinds of gradients - linear and radial.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
主要涉及的函数如下：
createLinearGradient
createRadialGradient
addColorStop
图像的绘制例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Images</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image directly onto the canvas at the top left
var srcImg = document.getElementById("img1");
ctx.drawImage(srcImg, 0,0);
// draw the image scaled down onto the canvas
//ctx.drawImage(srcImg, 50,50,350,150);
// draw just a portion of the source image onto the canvas
//ctx.drawImage(srcImg, 350,200,125,100,50,50,125,100);
// draw the video onto the canvas. We need to set an interval function
// in order to grab each frame from the video and paint it onto the canvas.
//var srcVid = document.getElementById("vid1");
//srcVid.play();
//setInterval(function () {
//var theCanvas = document.getElementById('Canvas1');
//var ctx = theCanvas.getContext("2d");
//var srcVid = document.getElementById("vid1");
//ctx.drawImage(srcVid, 0,0);
//}, 16);
}
}
}
</script>
</head>
<body>
<h1>Drawing Images</h1>
<p>Images can be drawn directly onto a canvas element in a variety of ways. Your code can drawn an image
directly from an IMG or VIDEO element that is already in the page or loaded dynamically via script, or
another canvas element can be used as a source image.</p>
<canvas id="Canvas1" width="715" height="315">Your browser does not support canvas.</canvas>
<!-- source images used in this example -->
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
<video id="vid1" src="video/podcast_teaser.mp4" loop style="display:none"></video>
</body>
</html>
注意drawImage的三种形式：
drawImage(srcImg, dx,dy);
drawImage(srcImg, dx,dy,dw,dh);
drawImage(srcImg, sx,sy,sw,sh,dx,dy,dw,dh);
drawImage函数同样可以用于显示视频。
使用遮盖：
<!DOCTYPE html>
<html>
<head>
<title>Clipping Paths</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function () {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image
var srcImg = document.getElementById("img1");
// create a circle clipping path
ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, 150, 0, 2 * Math.PI);
ctx.clip();
/*
// create an arbitrary clipping path
ctx.beginPath();
ctx.moveTo(105, 200);
ctx.lineTo(250, 25);
ctx.lineTo(525, 50);
ctx.lineTo(475, 285);
ctx.closePath();
ctx.clip();
*/
ctx.drawImage(srcImg, 0, 0);
}
}
}
</script>
</head>
<body>
<h1>Clipping Paths</h1>
<p>Clipping paths restrict drawing to a particular area of the canvas. Think of clipping paths as masks -
areas where the mask is empty show through, while areas where the mask is opaque do not.</p>
<p>Any path can be a clipping path. You simply draw the path as normal and then call the context's clip()
function to create one.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
</body>
</html>