Canvas globalCompositeOperation вход и выход не работает с несколькими источниками и приемниками - PullRequest
Новая
       42

Canvas globalCompositeOperation вход и выход не работает с несколькими источниками и приемниками

0 голосов
/ 04 июля 2019

Значения HTML5 Canvas globalCompositeOperation вход и выход не работают с несколькими исходными и конечными изображениями.Результатом операции является пустой холст.Все остальные значения 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>

Дайте мне знать, если что-то не так с тем, как я делаю, или это ошибка?Спасибо ..

1 Ответ

1 голос
/ 05 июля 2019

Каждый последующий вызов функции 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();
...