globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型,其中type是用于标识要使用的合成或混合模式操作的字符串。
使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像,蓝色矩形是源图像:
JavaScript:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML canvas globalCompositeOperation属性使用-基础教程(528045.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); ctx.fillStyle="blue"; ctx.globalCompositeOperation="source-over"; ctx.fillRect(50,50,75,50); ctx.fillStyle="red"; ctx.fillRect(150,20,75,50); ctx.fillStyle="blue"; ctx.globalCompositeOperation="destination-over"; ctx.fillRect(180,50,75,50); </script> </body> </html>测试看看 ‹/›
IEFirefoxOperaChromeSafari
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 属性值:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML canvas globalCompositeOperation属性使用-基础教程(528045.com)</title> <style> canvas { border:1px solid #d3d3d3; margin-right:10px; margin-bottom:20px; } </style> </head> <body> <script> var gco=new Array(); gco.push("source-atop"); gco.push("source-in"); gco.push("source-out"); gco.push("source-over"); gco.push("destination-atop"); gco.push("destination-in"); gco.push("destination-out"); gco.push("destination-over"); gco.push("lighter"); gco.push("copy"); gco.push("xor"); for (n=0;n<gco.length;n++) { document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"); var c=document.createElement("canvas"); c.width=120; c.height=100; document.getElementById("p_" + n).appendChild(c); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation=gco[n]; ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill(); document.write("</div>"); } </script> </body> </html>测试看看 ‹/›