您的位置：首页 > 运维架构

canvas globalCompositeOperation

2016-06-21 16:01 513 查看
globalCompositeOperation 可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。

使用：globalCompositeOperation = type;

效果图如下：

不知为什么，source-in、source-atop 效果没出来



不知为什么，destination-in、destination-out 效果没出来





<!--图片的源码为-->
<body>
<div>
<ul>
<li>source-over：默认设置，新图形会覆盖在原有内容之上。</li>
<li>source-in：新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。</li>
<li>source-out：结果是只有新图形中与原有内容不重叠的部分会被绘制出来。</li>
<li>source-atop：新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。</li>
</ul>
<canvas id="canvas1" width=160 height=160></canvas>
<canvas id="canvas2" width=160 height=160></canvas>
<canvas id="canvas3" width=160 height=160></canvas>
<canvas id="canvas4" width=160 height=160></canvas>
</div>

<div>
<ul>
<li>destination-over：会在原有内容之下绘制新图形。</li>
<li>destination-in：原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。</li>
<li>destination-out：原有内容中与新图形不重叠的部分会被保留。</li>
<li>destination-atop：原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形。</li>
</ul>
<canvas id="canvas5" width=160 height=160></canvas>
<canvas id="canvas6" width=160 height=160></canvas>
<canvas id="canvas7" width=160 height=160></canvas>
<canvas id="canvas8" width=160 height=160></canvas>
</div>

<div>
<ul>
<li>lighter：两图形中重叠部分作加色处理。</li>
<li>darker：两图形中重叠的部分作减色处理。</li>
<li>xor：重叠的部分会变成透明。</li>
<li>copy：只有新图形会被保留，其它都被清除掉。</li>
</ul>
<canvas id="canvas9" width=160 height=160></canvas>
<canvas id="canvas10" width=160 height=160></canvas>
<canvas id="canvas11" width=160 height=160></canvas>
<canvas id="canvas12" width=160 height=160></canvas>
</div>

<script type="text/javascript">

draw(1, "source-over");
draw(2, "source-in");
draw(3, "source-out");
draw(4, "source-atop");

draw(5, "destination-over");
draw(6, "destination-in");
draw(7, "destination-out");
draw(8, "destination-atop");

draw(9, "lighter");
draw(10, "darker");
draw(11, "xor");
draw(12, "copy");

function draw(id, globalCompositeOperation) {
var canvas = "canvas" + id;console.log(canvas);
var ctx = document.getElementById(canvas).getContext("2d");

ctx.globalCompositeOperation = globalCompositeOperation;

ctx.fillStyle = "#0000ff";
ctx.fillRect(0, 0, 100, 100);

ctx.fillStyle = "#ff0000";
ctx.fillRect(40, 40, 100, 100);
}
</script>
</body>


参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript canvas
相关文章推荐
新的分享
章节导航