标签：
本文转自：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>
显示在同一行，由此不难发现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>
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>
第二组是指曲线的终点；第一组代表控制点（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>
除了我们刚才用到的线性渐变以外，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>
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>
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>
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>
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>
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的数据，那么就可以随意呈现这些远程图片。在开发的过程中要注意这个限制条件，使用安全的渲染方式。
标签：
原文地址：http://www.cnblogs.com/lvmylife/p/5377551.html
