Question

HTML5 Canvas globalCompositeOperation值source-in和destination-in不适用于多个源图像和目标图像。该操作将导致空白画布。 globalCompositeOperation的所有其他值都可以使用。.

<!DOCTYPE html>
<html>
<body >
<canvas id="myCanvas" width="512" height="512"></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>

让我知道我的操作方式是否有问题或是错误？谢谢。

Answer 1

每个对fill（）的后续调用都是一个新的复合操作。在您的情况下，最后一条弧线不会与当前图形相交，并且将导致合成为空白。

在调用fill（）之前，需要绘制要包含在复合操作中的所有元素。示例：

num_series

Canvas globalCompositeOperation源输入和目标输入不适用于多个源和目标

1 个答案: