画布 globalCompositeOperation 源输入和目标输入不能与多个源和目标一起使用
Posted
技术标签:
【中文标题】画布 globalCompositeOperation 源输入和目标输入不能与多个源和目标一起使用【英文标题】：Canvas globalCompositeOperation source-in and destination-in not working with multiple source and destination 【发布时间】：2019-11-15 08:47:00 【问题描述】：html5 Canvas globalCompositeOperation 值 source-in 和 destination-in 不适用于多个源图像和目标图像。该操作导致空白画布。 globalCompositeOperation 的所有其他值都有效..
<!DOCTYPE html>
<html>
<body >
<canvas id="myCanvas" ></canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='blue';
ctx.fillRect(10,10,50,50);
ctx.fillRect(100,100,50,50);
ctx.globalCompositeOperation='source-in';
ctx.beginPath();
ctx.fillStyle='red';
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle='red';
ctx.arc(110,110,30,0,2*Math.PI);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
如果我的操作方式有问题或者是错误，请告诉我？谢谢..
【问题讨论】：
【参考方案1】：对 fill() 的每个后续调用都是一个新的复合操作。在您的情况下，最后一条弧与当前图纸不相交，将导致空白复合。
在调用 fill() 之前，您需要绘制所有想要包含在复合操作中的元素。示例：
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='blue';
ctx.fillRect(10,10,50,50);
ctx.fillRect(100,100,50,50);
ctx.globalCompositeOperation='source-in';
ctx.fillStyle='red';
ctx.beginPath();
ctx.arc(50,50,30,0,2*Math.PI);
ctx.arc(110,110,30,0,2*Math.PI);
ctx.fill();
【讨论】：
以上是关于画布 globalCompositeOperation 源输入和目标输入不能与多个源和目标一起使用的主要内容，如果未能解决你的问题，请参考以下文章