正文
canvas知识01
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
本文转自：http://www.cnblogs.com/jsdarkhorse/archive/2012/06/29/2568451.html
更多参考：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#-1
1、HTML Canvas API有两方面优势可以弥补
首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。
2、在网页上使用canvas元素时，它会创建一块矩形区域。
默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。
3、canvas是行内元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#game {
background-color:#ccc;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:500px;
height:500px;
margin:0 auto
}
</style>
</head><body>
<canvas id="game"></canvas>
<canvas id="game"></canvas>
</body>
</html>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/8AAAIFCAIAAAALHtrKAAAPwElEQVR4nO3dS24bVhZF0Zr/2AoSYDK92EIcwIAbpDyBkNU5PeVDJ0Ix3lxrBPd1Ng9ECfrPFQAAeAz/ufcBAADA/4n1DwAAj8L6BwCAR2H9AwDAo7D+AQDgUVj/AADwKKx/AAB4FLeu/8vlcjqdfv7558Ph8Pz8/F8A/pWen58Ph8PHjx9Pp9PlcvmujwSpB/gh/JPU37T+z+fzhw8f7v1MAL7P4XB4fX298fNA6gF+RN+V+r9e/5fL5fPnz/d+FAB/36+//vrnPxmSeoAf3V+m/tb1/8svv9z7LQD8U58/f5Z6gLY/T/1N6//19fXerwDgfXz79k3qAdr+KPU3rf/ffvvNL4ACZBwOh7dfCks9QMnvpv7W9X86ne59PwDv6Xw+Sz1A29vU37r+P378eO/jAXhPnz59knqAtrepv3X9Hw6Hex8PwHs6Ho9SD9D2NvW3rv+np6d7Hw/Ae3p+fpZ6gLa3qb91/d/7cgDen9QD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APkWf8AjNQD5Fn/AIzUA+RZ/wCM1APk/c31//T0dO/LAXhPz8/PUg/Q9jb1t67/4/F47+MBeE/H41HqAdrepv7W9f/p06d7Hw/Ae3p5eZF6gLa3qb91/Z9Op3sfD8B7Op/PUg/Q9jb1t67/y+XiG2GAjJ9++ulyuUg9QNjvpv7W9X+9Xl9fX+/9BADex7dv36QeoO2PUn/r+r9er1++fLn3KwD4p758+SL1AG1/nvpb1//1ev369eu93wLA3/f161epB2i7JfW3rv/r9Xo+nz98+HDvRwHwfQ6Hw+vr642fB1IP8CP6rtTfuv6v1+vlcjmdTi8vL8fj0X+HAfjXenp6Oh6PLy8v5/P5L//2S+oBfkT/JPW3rn8AAOBHZ/0DAMCjsP4BAOBRWP8AAPAorH8AAHgU1j8AADwK6x8AAB6F9Q8AAI/C+gcAgEfxP4NO/V117AIdAAAAAElFTkSuQmCC" alt="" width="331" height="167" />
显示在同一行，由此不难发现canvas是行内元素。
4、CSS和canvas
同大多数HTML元素一样，canvas元素也可以通过应用CSS的方式来增加边框，设置内边距、外边距等，而且一些CSS属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，其样式默认同canvas元素本身是一样的。
此外，在canvas中为context设置属性同样要遵从CSS语法。例如，对context应用颜色和字体样式，跟在任何HTML和CSS文档中使用的语法完全一样。
5、兼容性问题
在所有浏览器中，只有Internet Explorer不支持HTML5 Canvas。如果需要在Internet Explorer中使用canvas，可以选择使用名为explorercanvas的开源项目。使用explorercanvas时，需要先判断当前浏览器是否是Internet Explorer，如果是则在页面中嵌入script标签来加载explorercanvas。写法如下：
1 <head>
2 <!--[if IE]><script src="excanvas.js"></script><![endif]-->
3 </head>
6、“2d”上下文环境
通过传入“2d”来获取一个二维上下文，这也是到目前为止唯一可用的上下文。提示 规范未来的某个版本中可能会增加对三维上下文的支持。
7、对上下文的很多操作都不会立即反映到页面上。
beginPath、moveTo以及lineTo这些函数都不会直接修改canvas的展示结果。
canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示 出来。
8、圆形绘制。
调用方法：context.arc(100, 100, 50, 0, 1/2*Math.PI, true);
参数依次表示：圆心x坐标，圆心y坐标，半径，开始弧度，结束弧度，顺时针还是逆时针（true表示逆时针，false表示顺时针）。 1/2Math.PI表示1/4圆的弧度。
9、变换（缩放、平移、旋转等）
可以像目前主流图像编辑工具那样支持实时图像处理，所以API中这部分内容的复杂性是必要的。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>未命名文件</title>
7 <script>
8 function drawDiagonal() {
9 var canvas = document.getElementById('diagonal');
10 var context = canvas.getContext('2d');
11 // 保存当前绘图状态
12 context.save();
13 // 向右下方移动绘图上下文
14 context.translate(70, 140);
15 // 以原点为起点，绘制与前面相同的线段
16 context.beginPath();
17 context.moveTo(0, 0);
18 context.lineTo(70, -70);
19 context.stroke();
20 // 恢复原有的绘图状态
21 context.restore();
22 }
23 window.addEventListener("load", drawDiagonal, true); </script>
24 </head>
25
26 <body>
27 <canvas id="diagonal" width="200" height="200"> </canvas>
28 </body>
29 </html>
30 </body>
31 </html>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACOCAIAAABhdAclAAACTUlEQVR4nO3du20DMRQFUfeg7b8IxVKoMrStXAcGDMOf9UqAlvMeZxq4BA6YMOFbDNzb6APYVvKgkwedPOjkQScPOnnQyYNOHnTyoJMHnTzo5EEnDzp50MmDTh508qCTB5086ORBJw86edDJg04edPKgkwedPOjkQScPOnnQyYNOHnTyoJMHnTzo5EEnDzp5nu9+v796Qp4nu1wuy7Ks6/rSFXme6Xw+n06n2+326iF5Hu4wm8jzaEfaRJ6HOtgm8uzveJvIs7MhNpFnT6NsIs+/DbSJPNuNtYk8Gw23iTx/RbCJPL8GsYk8P+PYRJ5voWwiz9doNpHnM6BN5PmIaRN5AraJPGSbTM4Dt8nMPHybTMtTwiZz8lSxyYQ8hWwyG08tm0zFU84m8/BUtMkkPEVtMgNPXZu05yltk9481W3SmKeBTbry9LBJS542NunH08kmzXia2aQTTz+btOFpaZMePF1t0oCnsU2q8/S2SWme9japyzODTYryTGKTijzz2KQcz1Q2qcUzm00K8Uxokyo8c9qkBM+0NuHzzGwTOM/kNiHzaBMsjzYfEXm0+QzHo83XWDzafAvEo83PKDza/BqCR5u/Gs+jzUaDebTZbiSPNv82jEebPY3h0WZnA3i02d/RPNo81KE82jzacTzrui7Lcr1eD1ts0KG354CfJJs1/tXANpIHnTzo5EEnDzp50MmDTh508qCTB5086ORBJw86edDJg04edPKgkwedPOjkQScPOnnQyYNOHnTyoJMHnTzo5EEnDzp50MmD7h3+75tjBx7rwQAAAABJRU5ErkJggg==" alt="" />
10、closePath。
这个函数的行为同lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
11、描边。
1 // 加宽线条
2 context.lineWidth = 4;
3 // 平滑路径的接合点
4 context.lineJoin = 'round';
5 // 将颜色改成棕色
6 context.strokeStyle = '#663300';
7 // 最后，绘制树冠
8 context.stroke();
也可以把lineJoin属性设置成bevel或者miter（相应的context.miterLimit值也需要调整）来变换拐角样式。
lineCap可以把它的值设置为：butt、square或者round，以此来指定线条末端的样式。
12、strokeRect和clearRect。
strokeRect的作用是基于给出的位置和坐标画出矩形的轮廓，clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态，即透明 色。
在HTML5 Canvas API中，canvas的清除矩形功能是创建动画和游戏的核心功能。如果希望创建运行起来比较流畅的动画，就需要使用剪裁（clipping）功能了，有可能还需要二次缓存canvas，以便最小化由于频繁的清除动作而导致的画面闪烁。
13、绘制曲线。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>未命名文件</title>
7 <script>
8 function drawDiagonal() {
9 var canvas = document.getElementById('diagonal');
10 var context = canvas.getContext('2d');
11 // 保存canvas的状态并绘制路径
12 context.save();
13 context.translate(100,100);
14 context.beginPath();
15 // 第一条曲线向右上方弯曲
16 context.moveTo(0, 0);
17 context.quadraticCurveTo(170, -50, 260, -190);
18 // 第二条曲线向右下方弯曲
19 context.quadraticCurveTo(310, -250, 410,-250);
20 // 使用棕色的粗线条来绘制路径
21 //context.lineTo(100,100);
22 context.strokeStyle = '#663300';
23 context.lineWidth = 3;
24 context.stroke();
25 // 恢复之前的canvas状态
26 context.restore();
27 }
28 window.addEventListener("load", drawDiagonal, true); </script>
29 </head>
30
31 <body>
32 <canvas id="diagonal" width="200" height="200"> </canvas>
33 </body>
34 </html>
35 </body>
36 </html>
aaarticlea/png;base64,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" alt="" />
第二组是指曲线的终点；第一组代表控制点（control
point）。所谓的控制点位于曲线的旁边（不是曲线之上），其作用相当于对曲线产生一个拉力。通过调整控制点的位置，就可以改变曲线的曲率。
HTML5
Canvas
API的其他曲线功能还涉及bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点（如半径、角度等）让曲线更具可塑性。
14、在canvas中插入图片。
在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。
用HTML5 Canvas
API内置的几个简单命令可以轻松地为canvas添加图片内容。不过，图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。
浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 var canvas = document.getElementById('diagonal');
14 var context = canvas.getContext('2d');
15 // 加载图片bark.jpg
16 var bark = new Image();
17 bark.src = "http://www.jsdarkhorse.com/templets/default/images/logo.jpg";
18 // 图片加载完成后，将其显示在canvas上
19 bark.onload=function(){
20 context.drawImage(bark, 5, 50, 100, 50);
21 }
22 }
23 </script>
24 </head>
25
26 <body>
27 <canvas id="diagonal" width="200" height="200"> </canvas>
28 </body>
29 </html>
参数设置形式一：context.drawImage(image,x,y)
image:Image对象 var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
参数设置形式二： context.drawImage(image,x,y,w,h)
image:Image对象 var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
w:绘制图像的宽度
h:绘制图像的高度
参数设置形式三： context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制
image:Image对象 var img=new Image(); img.src="url(...)";
sx：图像上的x坐标
sy：图像上的y坐标
sw：矩形区域的宽度
sh：矩形区域的高度
dx：画在canvas的x坐标
dy：画在canvas的y坐标
dw：画出来的宽度
dh：画出来的高度
15、渐变。
使用渐变需要三个步骤：
(1) 创建渐变对象；
(2) 为渐变对象设置颜色，指明过渡方式；
(3) 在context上为填充样式或者描边样式设置渐变。
要设置显示哪种颜色，在渐变对象上使用addColorStop函
数即可。
这个函数允许指定两个参数：颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数
值，代表沿着渐变线渐变的距离有多远。除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变化的。为了达到
这样的效果，需要使用颜色值的另一种表示方法，例如内置alpha组件的CSS rgba函数。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 var canvas = document.getElementById('diagonal');
14 var context = canvas.getContext('2d');
15 context.translate(100,100);
16 // 创建用作树干纹理的三阶水平渐变
17 var trunkGradient = context.createLinearGradient(-5, -50, 50, -50);
18 // 树干的左侧边缘是一般程度的棕色
19 trunkGradient.addColorStop(0, '#663300');
20 // 树干中间偏左的位置颜色要淡一些
21 trunkGradient.addColorStop(0.4, '#996600');
22 // 树干右侧边缘的颜色要深一些
23 trunkGradient.addColorStop(1, '#552200');
24 // 使用渐变色填充树干
25 context.fillStyle = trunkGradient;
26 context.fillRect(-5, -50, 50, 100);
27 // 接下来，创建垂直渐变，以用作树冠在树干上投影
28 var canopyShadow = context.createLinearGradient(0, -50, 50, 100);
29 // 投影渐变的起点是透明度设为50%的黑色
30 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
31 // 方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，这段长度之外的树干上没有投影
32 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
33 // 在树干上填充投影渐变
34 context.fillStyle = canopyShadow;
35 context.fillRect(-5, -50, 50, 100);
36 }
37 </script>
38 </head>
39
40 <body>
41 <canvas id="diagonal" width="200" height="200"> </canvas>
42 </body>
43 </html>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAADZCAIAAAAvwnJmAAAPPUlEQVR4nO3S53Zc53mG4fs0HKuQBNExg+m9YCqm994xGAx67wR7EylRkmUlTg5qn1Pyg+CylpeT2Dve8ffjvY7gWc+6+U8hVMU/e4AQ/y2pU6hL6hTq+ss6NSEMIHUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdhrP/DsfvcX6F62s83+J7QOAhoRnCs0TmiC2QWGR9mbSJrJmchaKNsoOKk7qbppe2n06Ajp+2j5aXpoemh6abhouGk7qDmp2qjaqNipWKhfIqJTNFE4UV8kvkFskukJknM0f6MakZ1h+RfMg/+5W/idRpOPvvcP4e99d4vsH3AP9Dgo8IPyYyR2z+Ps3UClkzeQsFK2U71d+k2Q3QC9IL0vXT8dPx0fHS9tBy03TR/NJo3U7NRtVK1UJllbKZkoniMoUl8ovk5snOkZm9DzT1SOoUmqZpmuNfcH2F52t83xL4nOYMkVli88QXWF8ivULGRH6V4m/T9ND20Q0wCDEMMwjRD9IP0PPT9dH90mjbTctFy0nTQcNO3UbNSs1CdZWKmdIKpWWKSxQWyM+TmyM7S2aGtNQpPnP9Hs/XeL/B/4DgQ8IzRB4TmyOxQHKR9DJZEzkzRStlG1UHddd9mr0A/SCjNTYijNYYhhiGGATpB+j76fnoeel66LjpuGg7aTlo2mnYqFupW6itUjFRXqa0RHGRwgKFeXKzZB+TmZE6haZpmub5Ct83+L8l+IDwIyKPic6SmGd9kdQS2RXyZooWyjaqdupOmm7aXrp+BkFGYcYRJlE2I2yssRFmFGIUZBhg6Gfgo++l56Hnpuui46TtoGWnaaNhpWGhZqa6QmWZ8hKlRYrzFObIz5KTOsVn3q/wf0PwAaGHRGaIzRKfI7lAeonMMnkzhVXK1r9Msx/4c5rTOFsxJhE219gMMw6xEWQUYPS5US8DL303PRddJx0HbTstG00rjVXqJqorVJepLFFaoPQ50MdSp9A0TdN8XxP8lvBD1h4RfUx8juQ8qUUyy+RMFFcpWajaqDtoumh76PkYBBiG2FxjK8o0zk6CnTjTGFtRJhEmXxodB9kIMPIz9DH0MnDTd9Fz0nXQsdO20rTQMFM3UVuhukRlkfICpTmKs1Kn0DRN0wLfEHrA2iOiM8RnSc6TWiCzRG6FgpmyhYqNmp2mi7abrpdBgFGQcZhJlO04uwn21tlNsBNnO8Z2lGmErTUmYSYhNoOMA2z42fAx8jJ003fRd9Jz0LXRttJapWmmsUJ9mdoSlQXK85TmpE6haZqmhb5l7SGRR8Qfk5wjtUBmkdwyBROlVapWanYajvs0+74vaUbYjrGbYH+dgxQH6+wn2UuwG2Mnyk6U7TWmYbZCTIJsBhj7GfsYeRi6GboYOOnZ6VjpWGiv0jR9CXSR6gIVqVN8Fn5A5BGxGRKzpOZJL5JdomCiZKZioWaj4aDlouuh72MYYBxissY0ym6C/SRHaY4zHKU5WOcgyX6CvTh7MXaj7ETYDjMNsRVkEmDiZ+xjw8Poc6AOeja6nwM10zLRXKa+RG2B6rzUKTRN07TIA2IzJB6zPkd6gewS+WVKZiqrVK007LScdNz0vQz9bASZrDGNsBNjP8lhiuMMp1lOMhynOEpxmOQgwX6c/Rh7UXYj7KyxHWIaZCvAxM+ml7GHDTcjJwM7fRs9K91V2mZaKzSXaSxSW5A6haZpmhZ9SGKG5CypObKL5JcorlA2U7NQt9Fy0HHR8zD0sxFgM3Sf5l6CoxQnac6yXOQ5z3Ga4STNSYrjdY4SHMY5iLEfZS/C7ho7IbaDTANs+Zh42fQwdjFyMLDTt9Kz0DXTMdFeprlEQ+oUn8UfkXxMao7MPLklisuUTVRXqVtp2um46LkZeO/T3AqzE2UvzkHyz2leFrjMc57lLMNZmtMUJ+scJzhKcBjjIMp+hL0wuyF2gmwHmH4O1M3YycjB0MbASn+VrpnOCu1lmotSp9A0TdMSM6RmycyTW6CwTGmFipm6laaNtoOem4GHkY/NIFthtiPsxzlMcrzOWYaLHFcFbkpcF7nKc5njIsN5mrMUp+ucJDmOcxTjMMpBhP0weyF2Auz4mfrY8rDpYuxkw87QysBC30zXRGeZ9pLUKTRN07T1GdJzZOfJL1JaoWKitkrTRttO13mf5tjPVojtNXajHCQ4Xuc0zUWO6wK3JZ6UuS1xU+A6z1WOywwXGc5TnK1zmuQkznGMoyiHaxyE2QuyG2DHz7aXLTcTJ2MHGzZGVgar9M10V+hIneKz1GOy8+QXKC5RWaFmpmGhbafroO9i5GXsZxJkO8xulP0YR0lOU5xnuMpzU+SuwrMqTys8KXJb5CbPdY6rLJcZLlKcr3OW5DTOSYzjL4HuB9kLsOtj6mHLxcTJpp0NKyMLQzN9E91lqVNomqZpmVny8xQWKS1TNVFfpWm9T3PoZsPHJMA0xG6E/RhHifs0L3PcFLkr86zKixrPqzwtc1fiSZHbPDc5rrNcpblMcbHOeYKzOCdRjiMcrXEY4iDInp8dL9tupi4mDjZtbFgZrTI00V+ROoWmaZqWnaOwQGmJygp1M00LbRs9JwM3Iw+bfqZBdsLsRzmMc5LkPM1llus8dyWeVXhR41WDl3WeV3hW5mmJuyJP8tzmuMlyneYqxeU6FwnO4pxGOYlwHOYwxEGAPR87HrZdTJ1M7GxaGVsYmRlIneKz/BylRSrL1Ew0V2lb6doZuBh5GPvYCrAdYm+NwxjHCU7XucxwneO2cJ/m6wZvmrxp8KrGiyovKjwv8bTIXZ4nOW6z3KS5TnGV5CLBeYyzKCdrHIc5CnLgZ8/LrpsdF1MHExubFsarjExSp9A0TdMK85SXqK1QN9Gy0LXRdzByM/Yy8bMdZDfMQYTjOKdJLtL3aT4t8aLK6zpvm7xv867Fmzqva7ys8rLC8xLPijzNc5fjSYabNDcprpJcxjmPcRbhdI3jEIcBDnzsedh1seNkamdilTrFb5QWqC5TN9E007HSszN0MvYw8TENsBtmP8JRjNMk5ymuMtzmeVrkeZlXtfs0P3T4rs27Jm8bvKnxusqrMi9KPC/wLM/THE8y3Ka4Wec6wWWciyjnEU7DHAc48nPgZc8tdYq/prJIbZmGifYqPRsDByMXm16mfnaC7K9xGOUkzvk6V2lustwVeF7mZZU3Dd63+Njl+x4fO3zX4n2Tdw3e1nhT5VWZlyVeFHie52mWuwxPUtyuc53gKsZllPM1ToJSp9T5P6ou0VihZaZjYWBn5GTsZsvHdoC9EIcRjmOcJbhMcZPhSZ5nJV5WeF3jfZMPHX7o8WOfH3p87PChxXdN3td5W+NtlddlXhV5WeB5jmdZnqa5S3Gb5DoudUqdf5vaEi0TnVV6VoYONlxMPGz72Q1yEOY4ymmciyTXaW6zPC3woszrKu8afGjzfZcf+/w85KcBn7p83+Fjiw9NvqvzvsbbCm++BPoix7OM1Cl1/p0ay7TNdC0MbGw42XSz5WU3wH6IwzVOY5wnuEpxm+Uuz/Miryu8rfO+yfed+zR/GfGHIT/1+dTlU4fvW3z8Eui7Cm9KvJI6pU59Wit0V+lbGdoZu9jysO1jL8hhmOMI53Euk9ykucvxrMDLEm9rvG/wscWnLj8P+OOIX8f8cYM/DPi5z49dPnX4ocXHBt9JnVLn/1HbRG+VoY0NBxM3Uy+7fg5CHK9xGuUywXWK2wzP8rws8rrCuzofmvzQ4ac+v4z41zF/2uRfx/xxxC8Dfu7xo9Qpdf6jdE0MLIxsbDqZutnxsR/gKMxJhPMY1+vcprnL8qLA6zJvq3xo8EObH7v8MuDXDf404T+2+NMmv0qdUuc/XM/MyMrYzsTJjoc9PwdBTtY4i3IZ52aduwzPcrwq8rbC+xrft/jU4ec+v474tzH/LnVKncYZrLJhY9PB1MWul4MARyFOI1zEuE7wJM2zLC/yvCnzrsqHBp/a/NTlD1Kn1Pn/YGhh086Wk203+z6OgpyEOY9yFed2nacZnud4VeRdhe9qfJQ6f0PqNNyGhYmdbRe7Hg78HIc4W+Myxk2CuxTPs7zM81rq/GukTsONrUwd7LjZ93IU4DTERYTrOLdJqfN/IXUabmJj28mem0MfJ0HOwlLn30rqNNzUzq6LfY/U+XeTOg0ndeomdRpO6tRN6jSc1Kmb1Gk4qVM3qdNwUqduUqfhpE7dpE7DSZ26SZ2Gkzp1kzoNJ3XqJnUaTurUTeo0nNSpm9RpOKlTN6nTcFKnblKn4aRO3aROw0mdukmdhpM6dZM6DSd16iZ1Gk7q1E3qNJzUqZvUaTipUzep03BSp25Sp+GkTt2kTsNJnbpJnYaTOnWTOg0ndeomdRpO6tRN6jSc1Kmb1Gk4qVM3qdNwUqduUqfhpE7dpE7DSZ26SZ2Gkzp1kzoNJ3XqJnUaTurUTeo0nNSpm9RpOKlTN6nTcFKnblKn4aRO3aROw0mdukmdhpM6dZM6DSd16iZ1Gk7q1E3qNJzUqZvUaTipUzep03BSp25Sp+GkTt2kTsNJnbpJnYaTOnWTOg0ndeomdRpO6tRN6jSc1Kmb1Gk4qVM3qdNwUqduUqfhpE7dpE7DSZ26SZ2Gkzp1kzoNJ3XqJnUaTurUTeo0nNSpm9RpOKlTN6nTcFKnblKn4aRO3aROw0mdukmdhpM6dZM6DSd16iZ1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJdUqdQl9Qp1CV1CnVJnUJd/5g6hVCH1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1CX1CnUJXUKdUmdQl1Sp1DXfwGxAj4AjMXJlQAAAABJRU5ErkJggg==" alt="" />
除了我们刚才用到的线性渐变以外，HTML5 Canvas API还支持放射性渐变，所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。
createRadialGradient(x0, y0, r0, x1, y1, r1)
代码中，前三个参数代表以(x0,y0)为圆心，r0为半径的圆，后三个参数代表以(x1,y1)为圆心，r1为半径的另一个圆。渐变会在两个圆中间的区域出现。
16、背景图。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 var canvas = document.getElementById('diagonal');
14 var context = canvas.getContext('2d');
15 // 加载图片bark.jpg
16 var bark = new Image();
17 bark.src = "http://www.jsdarkhorse.com/templets/default/images/logo.jpg";
18 // 图片加载完成后，将其显示在canvas上
19 bark.onload=function(){
20 context.fillStyle = context.createPattern(bark, 'repeat');
21 context.fillRect(5, 50, 100, 200);
22 }
23 }
24 </script>
25 </head>
26
27 <body>
28 <canvas id="diagonal" width="200" height="200"> </canvas>
29 </body>
30 </html>
aaarticlea/png;base64,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" alt="" />
17、缩放canvas对象。
为了在新的位置画出大一点的树，我们将使用另一种变换方式——缩放函数context.scale
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 function drawTree(context) {
14 // 创建用作树干纹理的三阶水平渐变
15 var trunkGradient = context.createLinearGradient(-5, -50, 50, -50);
16 // 树干的左侧边缘是一般程度的棕色
17 trunkGradient.addColorStop(0, '#663300');
18 // 树干中间偏左的位置颜色要淡一些
19 trunkGradient.addColorStop(0.4, '#996600');
20 // 树干右侧边缘的颜色要深一些
21 trunkGradient.addColorStop(1, '#552200');
22 // 使用渐变色填充树干
23 context.fillStyle = trunkGradient;
24 context.fillRect(-5, -50, 50, 100);
25 // 接下来，创建垂直渐变，以用作树冠在树干上投影
26 var canopyShadow = context.createLinearGradient(0, -50, 50, 100);
27 // 投影渐变的起点是透明度设为50%的黑色
28 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
29 // 方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，这段长度之外的树干上没有投影
30 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
31 // 在树干上填充投影渐变
32 context.fillStyle = canopyShadow;
33 context.fillRect(-5, -50, 50, 100);
34 /*createCanopyPath(context);
35 context.lineWidth = 4;
36 context.lineJoin = 'round';
37 context.strokeStyle = '#663300';
38 context.stroke();
39 context.fillStyle = '#339900';
40 context.fill(); */
41 }
42 var canvas = document.getElementById('diagonal');
43 var context = canvas.getContext('2d');
44 // 在(50,50)的位置绘制第一棵树
45 context.save();
46 context.translate(30, 30);
47 drawTree(context);
48 context.restore();
49 // 在(100,100)的位置绘制第二棵树
50 context.save();
51 context.translate(100, 100);
52 // 将第二棵树的宽高分别放大至原来的2倍
53 context.scale(2, 2);
54 drawTree(context);
55 context.restore();
56 }
57 </script>
58 </head>
59
60 <body>
61 <canvas id="diagonal" width="200" height="200"> </canvas>
62 </body>
63 </html>
aaarticlea/png;base64,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" alt="" />
scale 函数带有两个参数来分别代表在x、y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大（或者缩小）的量。
如果x值为2，就代表所绘制图像中全部元素都会变成两倍宽，如果y值为0.5，绘制出来的图像全部元素都会变成之前的一半高。
如果对一个不在原点的图形进行旋转变换，那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。与之类似，如果进行缩放操作时没有将图形放置到合适的坐标上，那么所有路径 坐标都会被同时缩放。取决于缩放比例的大小，新的坐标可能会全部超出canvas范围。
18、Canvas变换。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 function drawTree(context) {
14 // 创建用作树干纹理的三阶水平渐变
15 var trunkGradient = context.createLinearGradient(-5, -50, 50, -50);
16 // 树干的左侧边缘是一般程度的棕色
17 trunkGradient.addColorStop(0, '#663300');
18 // 树干中间偏左的位置颜色要淡一些
19 trunkGradient.addColorStop(0.4, '#996600');
20 // 树干右侧边缘的颜色要深一些
21 trunkGradient.addColorStop(1, '#552200');
22 // 使用渐变色填充树干
23 context.fillStyle = trunkGradient;
24 context.fillRect(-5, -50, 50, 100);
25 // 接下来，创建垂直渐变，以用作树冠在树干上投影
26 var canopyShadow = context.createLinearGradient(0, -50, 50, 100);
27 // 投影渐变的起点是透明度设为50%的黑色
28 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
29 // 方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，这段长度之外的树干上没有投影
30 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
31 // 在树干上填充投影渐变
32 context.fillStyle = canopyShadow;
33 context.fillRect(-5, -50, 50, 100);
34 }
35 var canvas = document.getElementById('diagonal');
36 var context = canvas.getContext('2d');
37 // 在(50,50)的位置绘制第一棵树
38 context.save();
39 context.translate(100,100);
40 drawTree(context);
41 // 从整体上前四个参数负责缩放和旋转，后两个参数是平移，前四个参数1，4为一组控制缩放，2，3为一组控制旋转，1和2是x值，3和4是y值，5和6分别为x,y的平移
42 context.transform(1, 0, -1, 1, 55, 0);
43 // 使用透明度为20%的黑色填充树干
44 context.fillStyle = 'rgba(0, 0, 0, 0.2)';
45 context.fillRect(-5, -50, 50, 100);
46 // 使用已有的阴影效果重新绘制树
47 context.fill();
48 // 恢复之前的canvas状态
49 context.restore();
50 }
51 </script>
52 </head>
53
54 <body>
55 <canvas id="diagonal" width="500" height="500"> </canvas>
56 </body>
57 </html>
aaarticlea/png;base64,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" alt="" />
19、Canvas文本。
操作canvas文本的方式与操作其他路径对象的方式相同：可以描绘文本轮廓和填充文本内部；同时，所有能够应用于其他图形的变换和样式都能用于文本。context对象的文本绘制功能由两个函数组成：
（1）fillText(text,x, y,maxwidth)
（2）strokeText(text,x,y,maxwidth)
两个函数的参数完全相同，必选参数包括文本参数以及用于指定文本位置的坐标参数。
maxwidth是可选参数，用于限制字体大小，它会将文本字体强制收缩到
指定尺寸。此外，还有一个measureText函数可供使用，该函数会返回一个度量对象，其中包含了在当前context环境下指定文本的实际显示宽度。
为了保证文本在各浏览器下都能正常显示，Canvas API为context提供了类似于CSS的属性，以此来保证实际显示效果的高度可配置。
font（CSS字体字符串，例如：italic Arial，scan-serif）；
textAlign（start、end、left、right、center，默认是start）；
textBaseline（top、hanging、middle、alphabetic、ideographic、bottom，默认是alphabetic）。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 var canvas = document.getElementById('diagonal');
14 var context = canvas.getContext('2d');
15 // 字号为60px，字体为impact
16 context.font = "60px impact";
17 // 将文本填充为棕色
18 context.fillStyle = '#996600';
19 // 将文本设为居中对齐
20 context.textAlign = 'center';
21 context.textBaseline='middle';
22 // 在canvas顶部中央的位置，以大字体的形式显示文本
23 context.fillText('Hello Jsdarkhorse!', 250, 250, 400);
24 context.restore();
25 }
26 </script>
27 </head>
28
29 <body>
30 <canvas id="diagonal" width="500" height="500"> </canvas>
31 </body>
32 </html>
aaarticlea/png;base64,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" alt="" width="385" height="285" />
20、应用阴影。
可以通过几种全局context属性来控制阴影。
shadowColor：任何CSS中的颜色值，可以使用透明度（alpha）；
ShadowOffsetX：像素值为正数，向右移动阴影；值为负数，向左移动阴影；
shadowOffsetY：像素值为正数，向下移动阴影；值为负数，向上移动阴影；
shadowBlur：高斯模糊值。值越大，阴影边缘越模糊。
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>未命名文件</title>
6 <style>
7 #diagonal {
8 background-color:#ccc
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 var canvas = document.getElementById('diagonal');
14 var context = canvas.getContext('2d');
15 // 设置文字阴影的颜色为黑色，透明度为20%
16 context.shadowColor = 'rgba(0, 0, 0, 0.2)';
17 // 将阴影向右移动15px，向上移动10px
18 context.shadowOffsetX = 15;
19 context.shadowOffsetY = -10;
20 // 轻微模糊阴影
21 context.shadowBlur = 2;
22 // 字号为60px，字体为impact
23 context.font = "60px impact";
24 // 将文本填充为棕色
25 context.fillStyle = '#996600';
26 // 将文本设为居中对齐
27 context.textAlign = 'center';
28 context.textBaseline='middle';
29 // 在canvas顶部中央的位置，以大字体的形式显示文本
30 context.fillText('Hello Jsdarkhorse!', 250, 250, 400);
31 context.restore();
32 }
33 </script>
34 </head>
35
36 <body>
37 <canvas id="diagonal" width="500" height="500"> </canvas>
38 </body>
39 </html>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAIAAABEtEjdAAAgAElEQVR4nO3d2Zojx3nmcd6RaUoiRV3DSB55ZFnrKU3RsmVrHssim2tzSJk01ep9I9ld3bVg3/cdKBQKVQAuag6+rlBURGYigUIt/fn/e+rAFtGJzMiIF5GRkZGvLAAA6rxy2TsAANg8wh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0AFCLcAUAhwh0A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DgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAKEe4AoBDhDgAK/X/cmNA0lK595AAAAABJRU5ErkJggg==" alt="" width="435" height="352" />
21、像素数据。
Canvas API最有用的特性之一是允许开发人员直接访问canvas底层像素数据。
这种数据访问是双向的：一方面，可以以数值数组形式获取像素数据；另一方面，可以修改数组的值以将其应用于canvas。
context.getImageData(sx, sy, sw, sh)。
这个函数返回当前canvas状态并以数值数组的方式显示。具体来说，返回的对象包括三个属性。
width：每行有多少个像素。
height：每列有多少个像素。
data：一维数组，存有从canvas获取的每个像素的RGBA值。该数组为每个像素保存了四个值——红、绿、蓝和alpha透明度。每个值都在0到255之间。因此，canvas上的每个像素在这个数组中就变成了四个整数值。
getImageData 函数有四个参数，该函数只返回这四个参数所限定的区域内的数据。只有被x、y、width和height四个参数框定的矩形区域内的canvas上的像素才会被取到，因此要想获取所有像素数据，就需要这样传入参数：getImageData(0, 0, canvas.width, canvas.height)。因为每个像素由四个图像数据表示，所以要计算指定的像素点对应的值是什么就有点头疼。
不要紧，下面有公式。在给定了width和height的canvas上，在坐标(x ,y)上的像素的构成如下。
红色部分：((width * y) + x) * 4
绿色部分：((width * y) + x) * 4 + 1
蓝色部分：((width * y) + x) * 4 + 2
透明度部分：((width * y) + x) * 4 + 3修改了任何像素的红、绿、蓝和alpha值之后，可以通过第二个函数来更新canvas上的显示，那就是context.putImageData(imagedata, dx, dy)。
putImageData允许开发人员传入一组图像数据，其格式与最初从canvas上获取来的是一样的。这个函数使用起来非常方便，因为可以直接用从 canvas上获取数据加以修改然后返回。一旦这个函数被调用，所有新传入的图像数据值就会立即在canvas上更新显示出来。
dx和dy参数可以用来指定偏移量，如果使用，则该函数就会跳到指定的canvas位置去更新显示传进来的像素数据。
最后，如果想预先生成一组空的canvas数据，则可调用context.createImageData(sw, sh)，这个函数可以创建一组图像数据并绑定在canvas对象上。这组数据可以像先前那样处理，只是在获取canves数据时，这组图像数据不一定会反映canvas的当前状态。
22、Canvas的安全机制。
上面讨论了直接操纵像素数据的方法，在这里有必要重点提醒一下，大多数开发者都会合法使用像素数据操作。
尽管如此，还是会有人出于某些邪恶的目的利用这种从canvas直接获取并且修改 数据的能力。出于这个原因，origin-clean canvas的概念应运而生，换句话说，如果canvas中的图片并非来自包含它的页面所在的域，页面中的脚本将不能取得其中的数据。
然而，在没有Canvas API以前，无法使用编程的方式获取下载图片的像素信息。来自其他网站的私有图片可以显示在本地，但无法被读取或者复制。如果允许脚本读取本地之外的图像数据，那么整个网络中的用户照片以及其他敏感的在线图片文档将被“无限制地共享”。
为了避免如此，在getImageData函数被调用的时候，如果canvas中的图像来自其他域，就会抛出安全异常。这样的话，只要不获取显示着其他域中 图片的canvas的数据，那么就可以随意呈现这些远程图片。在开发的过程中要注意这个限制条件，使用安全的渲染方式。
