码迷，mamicode.com
首页 > 其他好文 > 详细

Canvas简述

时间：2017-05-23 10:20:47      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：mdk   mit   cli   ipc   dff   vmw   via   nat   css   

    1. HTML Canvas API有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。
    2. 在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。
      技术分享
       1 <body>
 2   <div>
 3     <header>
 4       <h1>index</h1>
 5     </header>
 6     <nav>
 7       <p><a href="/">Home</a></p>
 8       <p><a href="/contact">Contact</a></p>
 9     </nav>
10 
11     <div>
12       <canvas id="game"></canvas>
13     </div>
14 
15     <footer>
16      <p>&copy; Copyright  by Administrator</p>
17     </footer>
18   </div>
19 </body>
      技术分享
      技术分享
    3. canvas是行内元素
      技术分享
       1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #game {
 8     background-color:#ccc;
 9     border-radius:10px;
10     -moz-border-radius:10px;
11     -webkit-border-radius:10px;
12     width:500px;
13     height:500px;
14     margin:0 auto
15 }
16 </style>
17 </head>
18 
19 <body>
20 <canvas id="game"></canvas>
21 <canvas id="game"></canvas>
22 </body>
23 </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”来获取一个二维上下文，这也是到目前为止唯一可用的上下文。提示 规范未来的某个版本中可能会增加对三维上下文的支持。
    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>
      技术分享

      技术分享
      从上面的代码中可以看到，我们为bark.jpg图片添加了onload处理函数，以保证仅在图像加载完成。除了图片本身外，还指定了x、y、width和height参数。这些参数会对贴图进行调整。我们还可以把原图的尺寸传进来，以便在裁切区域内对图片进行更多控制。

    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的数据，那么就可以随意呈现这些远程图片。在开发的过程中要注意这个限制条件，使用安全的渲染方式。

Canvas简述

标签：mdk   mit   cli   ipc   dff   vmw   via   nat   css   

原文地址：http://www.cnblogs.com/hoobey/p/6892498.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！