首页 > 代码库 > Canvas简述

Canvas简述

    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="http://www.mamicode.com/">Home</a></p>
       8       <p><a href="http://www.mamicode.com/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="http://www.mamicode.com/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简述