HTML 5深入浅出教学篇之十一

开发 前端
本文讲到的是HTML 5: 画布(canvas)之效果:填充色, 笔划色, 颜色值;剪裁;渐变色;贴图的平铺模式;阴影效果;全局;新颜色与画布当前已有颜色的合成方式;像素操作。

介绍

HTML 5: 画布(canvas)之效果

填充色, 笔划色, 颜色值 | fillStyle, strokeStyle

剪裁 | clip()

渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()

贴图的平铺模式 | createPattern()

阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

全局 Alpha | globalAlpha

新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation

保存画布上下文,以及恢复画布上下文 | save(), restore()

像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

示例

1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>填充色, 笔划色, 颜色值</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             /*  
  18.              * context.fillStyle - 指定填充色的颜色值  
  19.              *  
  20.              * context.strokeStyle - 指定笔划色的颜色值  
  21.              *  
  22.              * 颜色值示例如下:  
  23.              *   Color Name - "green"  
  24.              *   #rgb - "#0f0"  
  25.              *   #rrggbb = "#00ff00" 
  26.              *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)  
  27.              *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)  
  28.              *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)  
  29.              *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)  
  30.              */  
  31.             ctx.fillStyle = 'Red';  
  32.             ctx.strokeStyle = 'Green';  
  33.             ctx.lineWidth = 10;  
  34.             // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例,以及先 stroke 再 fill 和先 fill 再 stroke 的区别  
  35.             ctx.beginPath();  
  36.             ctx.rect(20, 20, 100, 100);  
  37.             ctx.stroke();  
  38.             ctx.fill();  
  39.             ctx.beginPath();  
  40.             ctx.rect(140, 20, 100, 100);  
  41.             ctx.fill();  
  42.             ctx.stroke();  
  43.         }  
  44.         function clearIt() {  
  45.             ctx.clearRect(0, 0, 260, 140);  
  46.         }  
  47.     </script> 
  48. </body> 
  49. </html> 

2、剪裁 | clip()
canvas/effect/clip.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>剪裁</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             var img = new Image();  
  18.             img.onload = function () {  
  19.                 ctx.drawImage(img, 0, 0, 512, 512);  
  20.             }  
  21.             img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";  
  22.             // img.src = "http://www.cnblogs.com/assets/html5_logo.png";  
  23.             /*  
  24.              * context.clip() - 只显示当前路径所包围的剪切区域  
  25.              */  
  26.             ctx.beginPath();  
  27.             ctx.arc(256, 256, 100, 0, Math.PI * 2, true);  
  28.             ctx.clip();  
  29.         }  
  30.         function clearIt() {  
  31.             ctx.clearRect(0, 0, 512, 512);  
  32.         }  
  33.     </script> 
  34. </body> 
  35. </html> 

3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>渐变色</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             /*  
  18.              * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象,并返回 CanvasGradient 类型的对象  
  19.              *   xStart, yStart - 线性渐变对象的起始点坐标  
  20.              *   xEnd, yEnd - 线性渐变对象的结束点坐标  
  21.              *  
  22.              * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点  
  23.              *   offset - 渐变参考点的位置,0.0 - 1.0 之间。起始点为 0,结束点为 1  
  24.              *   color - 渐变参考点的颜色值   
  25.              */  
  26.             var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);  
  27.             linearGradient.addColorStop(0, "red");  
  28.             linearGradient.addColorStop(0.5, "green");  
  29.             linearGradient.addColorStop(1, "blue");  
  30.             ctx.beginPath();  
  31.             ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);  
  32.             ctx.fillStyle = linearGradient;  
  33.             ctx.fill();  
  34.             /*  
  35.              * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象,并返回 CanvasGradient   
  36.              *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标  
  37.              *   radiusStart - 开始圆的半径  
  38.              *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标  
  39.              *   radiusEnd - 结束圆的半径  
  40.              */  
  41.             var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);  
  42.             radialGradient.addColorStop(0, "red");  
  43.             radialGradient.addColorStop(0.5, "green");  
  44.             radialGradient.addColorStop(1, "blue");  
  45.             ctx.beginPath();  
  46.             ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);  
  47.             ctx.fillStyle = radialGradient;  
  48.             ctx.fill();  
  49.         }  
  50.         function clearIt() {  
  51.             ctx.clearRect(0, 0, 200, 100);  
  52.         }  
  53.     </script> 
  54. </body> 
  55. </html> 

#p#

4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>贴图的平铺模式</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="620" height="620" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             var img = new Image();  
  18.             img.onload = function () {  
  19.                 /*  
  20.                  * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式  
  21.                  *   image - 图像对象。除了支持 HTMLImageElement 外,还支持 HTMLCanvasElement 和 HTMLVideoElement  
  22.                  *   repetitionStyle - 平铺模式(无论任何平铺模式,首图均在画布的左上角)  
  23.                  *     no-repeat - 不平铺,只贴图一次,当然也是在画布的左上角  
  24.                  *     repeat-x - x 轴方向上平铺图片  
  25.                  *     repeat-y - y 轴方向上平铺图片  
  26.                  *     repeat - x 轴和 y 轴方向均平铺图片  
  27.                  */  
  28.  
  29.                 var pattern = ctx.createPattern(img, "no-repeat");  
  30.                 ctx.fillStyle = pattern;  
  31.                 ctx.strokeStyle = "blue";  
  32.                 ctx.beginPath();  
  33.                 ctx.rect(0, 0, 300, 300);  
  34.                 ctx.fill();  
  35.                 ctx.stroke();  
  36.                 pattern = ctx.createPattern(img, "repeat-x");  
  37.                 ctx.fillStyle = pattern;  
  38.                 ctx.strokeStyle = "blue";  
  39.                 ctx.beginPath();  
  40.                 ctx.rect(320, 0, 300, 300);  
  41.                 ctx.fill();  
  42.                 ctx.stroke();  
  43.                 pattern = ctx.createPattern(img, "repeat-y");  
  44.                 ctx.fillStyle = pattern;  
  45.                 ctx.strokeStyle = "blue";  
  46.                 ctx.beginPath();  
  47.                 ctx.rect(0, 320, 300, 300);  
  48.                 ctx.fill();  
  49.                 ctx.stroke();  
  50.                 pattern = ctx.createPattern(img, "repeat");  
  51.                 ctx.fillStyle = pattern;  
  52.                 ctx.strokeStyle = "blue";  
  53.                 ctx.beginPath();  
  54.                 ctx.rect(320, 320, 300, 300);  
  55.                 ctx.fill();  
  56.                 ctx.stroke();  
  57.             }  
  58.             img.src = "http://res2.windows.microsoft.com/resbox/en/Windows%207/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png";  
  59.             // img.src = "http://www.cnblogs.com/assets/windows_logo.png";  
  60.         }  
  61.         function clearIt() {  
  62.             ctx.clearRect(0, 0, 620, 620);  
  63.         }  
  64.     </script> 
  65. </body> 
  66. </html> 

5、阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
canvas/effect/shadow.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>阴影效果</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="480" height="480" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             /*  
  18.              * context.shadowOffsetX - 阴影相对于实体的水平偏移值  
  19.              * context.shadowOffsetY - 阴影相对于实体的垂直偏移值  
  20.              * context.shadowBlur - 阴影模糊程度。默认值是 0 ,即不模糊  
  21.              * context.shadowColor - 阴影的颜色  
  22.              */  
  23.             ctx.shadowOffsetX = 5;  
  24.             ctx.shadowOffsetY = 10;  
  25.             ctx.shadowBlur = 10;  
  26.             ctx.shadowColor = "rgba(0, 0, 255, 0.5)";  
  27.             ctx.beginPath();  
  28.             ctx.arc(120, 120, 100, 0, Math.PI * 2, true);  
  29.             ctx.stroke();  
  30.             ctx.fillRect(300, 300, 100, 100);  
  31.         }  
  32.         function clearIt() {  
  33.             ctx.clearRect(0, 0, 480, 480);  
  34.         }  
  35.     </script> 
  36. </body> 
  37. </html> 

6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>全局 Alpha</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="140" height="140" style="background-color: rgb(222, 222, 222)"> 
  8.         您的浏览器不支持 canvas 标签  
  9.     </canvas> 
  10.     <br /> 
  11.     <button type="button" onclick="drawIt();">Demo</button> 
  12.     <button type="button" onclick="clearIt();">清除画布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             /*  
  18.              * context.globalAlpha - 设置全局的 alpha 值  
  19.              */  
  20.             ctx.globalAlpha = "0.5";  
  21.             ctx.fillStyle = "red";  
  22.             ctx.beginPath();  
  23.             ctx.rect(20, 20, 100, 100);  
  24.             ctx.fill();  
  25.         }  
  26.         function clearIt() {  
  27.             ctx.clearRect(0, 0, 140, 140);  
  28.         }  
  29.     </script> 
  30. </body> 
  31. </html> 

#p#

7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>新颜色与画布当前已有颜色的合成方式</title> 
  5. </head> 
  6. <body> 
  7.     <div id="msg"></div> 
  8.     <canvas id="canvas" width="200" height="200" style="background-color: rgb(222, 222, 222)"> 
  9.         您的浏览器不支持 canvas 标签  
  10.     </canvas> 
  11.     <br /> 
  12.     <button type="button" onclick="drawIt();">改变 globalCompositeOperation</button> 
  13.     <button type="button" onclick="clearIt();">清除画布</button> 
  14.     <script type="text/javascript"> 
  15.         var ctx = document.getElementById('canvas').getContext('2d');  
  16.         var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];  
  17.         var index = 0;  
  18.         function drawIt() {  
  19.             clearIt();  
  20.             ctx.fillStyle = "red";  
  21.             ctx.beginPath();  
  22.             ctx.rect(20, 20, 100, 100);  
  23.             ctx.fill();  
  24.  
  25.             /*  
  26.              * context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式  
  27.              *   source-atop - 保留已有颜色,然后绘制新颜色与已有颜色重合的部分  
  28.              *   source-in - 绘制新颜色与已有颜色重合的部分,其余全透明  
  29.              *   source-out - 绘制新颜色与已有颜色不重合的部分,其余全透明  
  30.              *   source-over - 在已有颜色的前面绘制新颜色。默认值  
  31.              *   destination-atop - 在已有颜色的后面绘制新颜色,然后保留已有颜色与新颜色重合的部分  
  32.              *   destination-in - 保留已有颜色与新颜色重合的部分,其余全透明  
  33.              *   destination-out - 保留已有颜色与新颜色不重合的部分,其余全透明  
  34.              *   destination-over - 在已有颜色的后面绘制新颜色  
  35.              *   lighter - 混合重叠部分的颜色  
  36.              *   copy - 删除已有颜色,只绘制新颜色  
  37.              *   xor - 透明化重叠部分的颜色  
  38.              */  
  39.             ctx.globalCompositeOperation = compositeOperationTypes[index];  
  40.             document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;  
  41.             ctx.fillStyle = "blue";  
  42.             ctx.beginPath();  
  43.             ctx.rect(80, 80, 100, 100);  
  44.             ctx.fill();  
  45.             index++;  
  46.             if (index >= compositeOperationTypes.length)  
  47.                 index = 0;  
  48.         }  
  49.         function clearIt() {  
  50.             ctx.clearRect(0, 0, 200, 200);  
  51.             // source-over 是 context.globalCompositeOperation 的默认值  
  52.             ctx.globalCompositeOperation = "source-over";  
  53.         }  
  54.     </script> 
  55. </body> 
  56. </html> 

8、保存画布上下文,以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>保存画布上下文,以及恢复画布上下文</title> 
  5. </head> 
  6. <body> 
  7.     <div>单击“save and draw”一次,然后单击“restore and draw”三次</div> 
  8.     <canvas id="canvas" width="280" height="140" style="background-color: rgb(222, 222, 222)"> 
  9.         您的浏览器不支持 canvas 标签  
  10.     </canvas> 
  11.     <br /> 
  12.     <button type="button" onclick="drawIt();">save and draw</button> 
  13.     <button type="button" onclick="restoreIt();">restore and draw</button> 
  14.     <script type="text/javascript"> 
  15.         var ctx = document.getElementById('canvas').getContext('2d');  
  16.         /*  
  17.          * save() - 将画布的上下文压入堆栈  
  18.          * restore() - 从堆栈中取一个画布的上下文,如果没有则什么都不做  
  19.          */  
  20.         function drawIt() {  
  21.             clearIt();  
  22.             ctx.strokeStyle = "red";  
  23.             ctx.fillStyle = "green";  
  24.             ctx.lineWidth = 5;  
  25.             ctx.save(); // 将画布的上下文压入堆栈,此时堆栈中有一个画布上下文  
  26.             drawRect1();  
  27.             ctx.strokeStyle = "blue";  
  28.             ctx.fillStyle = "yellow";  
  29.             ctx.lineWidth = 10;  
  30.             ctx.save(); // 将画布的上下文压入堆栈,此时堆栈中有两个画布上下文  
  31.             drawRect2();  
  32.         }  
  33.         function restoreIt() {  
  34.             clearIt();  
  35.             ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文,如果取不到则什么都不做  
  36.             drawRect1();  
  37.             drawRect2();  
  38.         }  
  39.         function drawRect1() {  
  40.             ctx.beginPath();  
  41.             ctx.rect(20, 20, 100, 100);  
  42.             ctx.stroke();  
  43.             ctx.fill();  
  44.         }  
  45.         function drawRect2() {  
  46.             ctx.beginPath();  
  47.             ctx.rect(140, 20, 100, 100);  
  48.             ctx.stroke();  
  49.             ctx.fill();  
  50.         }  
  51.         function clearIt() {  
  52.             ctx.clearRect(0, 0, 280, 140);  
  53.             ctx.strokeStyle = "black";  
  54.             ctx.fillStyle = "black";  
  55.             ctx.lineWidth = 1;  
  56.         }  
  57.     </script> 
  58. </body> 
  59. </html> 

#p#

9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>像素操作</title> 
  5. </head> 
  6. <body> 
  7.     <div id="msg"></div> 
  8.     <canvas id="canvas" width="300" height="300" style="background-color: black"> 
  9.         您的浏览器不支持 canvas 标签  
  10.     </canvas> 
  11.     <br /> 
  12.     <button type="button" onclick="drawIt();">Demo</button> 
  13.     <button type="button" onclick="clearIt();">清除画布</button> 
  14.     <br /><br /> 
  15.     <canvas id="canvas2" width="300" height="300" style="background-color: black"> 
  16.         您的浏览器不支持 canvas 标签  
  17.     </canvas> 
  18.     <br /> 
  19.     <button type="button" onclick="syncIt();">同步第一个Demo</button> 
  20.     <button type="button" onclick="redIt();">变红</button> 
  21.     <script type="text/javascript"> 
  22.         var canvas = document.getElementById('canvas');  
  23.         var canvas2 = document.getElementById('canvas2');  
  24.         var ctx = canvas.getContext('2d');  
  25.         var ctx2 = canvas2.getContext('2d');  
  26.         var timer = -1;  
  27.         var width = parseInt(canvas.width, 10);  
  28.         var height = parseInt(canvas.height, 10);  
  29.         function drawIt() {            
  30.             clearIt();  
  31.             /*  
  32.              * context.createImageData(width, height) - 按指定的宽和高创建并返回 ImageData 对象,其内所有像素的默认值为 rgba(0,0,0,0)  
  33.              *  
  34.              * context.createImageData(imageData) - 按指定的 ImageData 对象的宽和高创建一个新的 ImageData 对象并返回此对象,其内所有像素的默认值为 rgba(0,0,0,0)  
  35.              *   相当于 context.createImageData(imageData.width, imageData.height)  
  36.              *  
  37.              * context.getImageData(x, y, width, height) - 获取画布的指定范围内的 ImageData 对象,并返回此对象  
  38.              *   x - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 x 坐标  
  39.              *   y - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 y 坐标  
  40.              *   width - 需要获取的 ImageData 对象矩形框的宽  
  41.              *   height - 需要获取的 ImageData 对象矩形框的高  
  42.              *  
  43.              * putImageData(imagedata, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight]) - 在画布上写入指定的数据  
  44.              *   imagedata - 需要写入的 ImageData 对象  
  45.              *   x, y - 指定需要写入的 ImageData 对象矩形框相对于画布左上角的坐标  
  46.              *   [dirtyX, dirtyY, dirtyWidth, dirtyHeight] - 显示 ImageData 对象上指定范围内像素  
  47.              */  
  48.             /*  
  49.              * ImageData - 像素对象  
  50.              *   width - 像素对象的宽  
  51.              *   height - 像素对象的高  
  52.              *   data - 像素数据,CanvasPixelArray 类型的对象  
  53.              *  
  54.              * CanvasPixelArray - 像素数据对象,可以数组方式进行操作  
  55.              *   数组中每 4 个元素代表一个像素,每个元素为一个字节,4 个元素按照 rgba 的方式描述一个像素  
  56.              *   length - 元素总数,即像素总数 * 4  
  57.              */  
  58.             var imageData = ctx.createImageData(width, height);  
  59.             document.getElementById("msg").innerHTML = "CanvasPixelArray.length: " + imageData.data.length;  
  60.  
  61.             // 随机生成颜色不一样的像素,并写入到画布上  
  62.             timer = setInterval(randomPixel, 1);  
  63.             function randomPixel() {  
  64.                 var x = parseInt(Math.random() * width, 10);  
  65.                 var y = parseInt(Math.random() * height, 10);  
  66.                 var index = (y * width + x) * 4;  
  67.                 imageData.data[index + 0] = parseInt(Math.random() * 256);  
  68.                 imageData.data[index + 1] = parseInt(Math.random() * 256);  
  69.                 imageData.data[index + 2] = parseInt(Math.random() * 256);  
  70.                 imageData.data[index + 3] = parseInt(Math.random() * 256);  
  71.                 ctx.putImageData(imageData, 50, 50, 0, 0, 200, 200);  
  72.             }  
  73.         }  
  74.         function clearIt() {  
  75.             clearInterval(timer);  
  76.             ctx.clearRect(0, 0, width, height);  
  77.         }  
  78.         // 将 canvas 上的像素数据复制到 canvas2 上  
  79. function syncIt() {  
  80.             var imageData = ctx.getImageData(0, 0, width, height);  
  81.             ctx2.putImageData(imageData, 0, 0);  
  82.         }  
  83.         // 将 canvas2 上的非 rgba(0,0,0,0) 的点都变成红色  
  84. function redIt() {  
  85.             var imageData = ctx2.getImageData(0, 0, width, height);  
  86.             for (var i = 1; i < imageData.data.length / 4; i++) {  
  87.                 var iindex = i * 4;  
  88.                 if (imageData.data[index + 0] + imageData.data[index + 1] + imageData.data[index + 2] + imageData.data[index + 3] > 0) {  
  89.                     imageData.data[index + 0] = 255;  
  90.                     imageData.data[index + 1] = 0;  
  91.                     imageData.data[index + 2] = 0;  
  92.                     imageData.data[index + 3] = 255;  
  93.                 }  
  94.             }  
  95.             ctx2.putImageData(imageData, 0, 0);  
  96.         }  
  97.     </script> 
  98. </body> 
  99. </html> 

[源码下载]

原文链接:http://www.cnblogs.com/webabcd/archive/2012/02/27/2369452.html

责任编辑:张伟 来源: webabcd的博客
相关推荐

2012-05-31 09:35:43

HTML5

2012-05-30 15:17:54

HTML5

2012-05-30 13:26:12

HTML5

2012-05-31 09:19:22

HTML5

2012-05-31 09:54:13

HTML5

2012-05-30 13:49:52

HTML5

2012-05-30 14:51:09

HTML5

2012-05-30 10:52:09

HTML5

2012-05-30 11:11:42

HTML5

2012-05-30 13:17:46

HTML5

2009-11-18 13:30:37

Oracle Sequ

2009-11-17 17:31:58

Oracle COMM

2022-02-25 08:54:50

setState异步React

2021-03-16 08:54:35

AQSAbstractQueJava

2011-07-04 10:39:57

Web

2013-11-14 15:53:53

AndroidAudioAudioFlinge

2017-06-06 15:34:41

物联网数据库压缩

2017-06-05 14:50:33

大数据数据库压缩

2019-01-07 15:29:07

HadoopYarn架构调度器

2017-07-02 18:04:53

块加密算法AES算法
点赞
收藏

51CTO技术栈公众号