HTML 5 canvas globalCompositeOperation 属性

实例

使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像。蓝色矩形是源图像：

  1. <canvas id="myCanvas" class="canvas_example"> Your browser does not support the canvas tag. </canvas>

JavaScript:

  1. var c=document.getElementById("myCanvas");
  2. var ctx=c.getContext("2d");
  3.  
  4. ctx.fillStyle="red";
  5. ctx.fillRect(20,20,75,50);
  6. ctx.globalCompositeOperation="source-over";
  7. ctx.fillStyle="blue";
  8. ctx.fillRect(50,50,75,50);
  9.  
  10. ctx.fillStyle="red";
  11. ctx.fillRect(150,20,75,50);
  12. ctx.globalCompositeOperation="destination-over";
  13. ctx.fillStyle="blue";
  14. ctx.fillRect(180,50,75,50);

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 属性。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值： source-over
JavaScript 语法： context.globalCompositeOperation="source-in";

属性值

值 描述
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合。

更多实例

所有 globalCompositeOperation 属性值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. canvas
  6. {
  7. border:1px solid #d3d3d3;
  8. margin-right:10px;
  9. margin-bottom:20px;    
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <script>
  17. var gco=new Array();
  18. gco.push("source-atop");
  19. gco.push("source-in");
  20. gco.push("source-out");
  21. gco.push("source-over");
  22. gco.push("destination-atop");
  23. gco.push("destination-in");
  24. gco.push("destination-out");
  25. gco.push("destination-over");
  26. gco.push("lighter");
  27. gco.push("copy");
  28. gco.push("xor");
  29. for (n=0;n<gco.length;n++)
  30.     {
  31.     document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
  32.     var c=document.createElement("canvas");
  33.     c.width=120;
  34.     c.height=100;
  35.     document.getElementById("p_" + n).appendChild(c);
  36.     var ctx=c.getContext("2d");    
  37.     ctx.fillStyle="blue";
  38.     ctx.fillRect(10,10,50,50);
  39.     ctx.globalCompositeOperation=gco[n];
  40.     ctx.beginPath();
  41.     ctx.fillStyle="red";
  42.     ctx.arc(50,50,30,0,2*Math.PI);
  43.     ctx.fill();
  44.     document.write("</div>");    
  45.     }
  47. </script>
  49. </body>
  50. </html>