html - 在canvas中，如何绘制2个半透明重叠的圆圈

Question

我想在 HTML Canvas 的灰色矩形上绘制两个圆圈。

我尝试了以下步骤:

1. 将矩形填充为灰色

2. 更改 globalComposition 打火机以混合两种颜色。

我只想混合蓝色和红色，而不是灰色和灰色矩形。

Answer 1

您可以通过 rgba 中的圆圈填充样式轻松实现此属性，其中最后一个参数为 alpha 或不透明度。语法将是这样的

circle.fillStyle = "rgba(255, 255, 255, 0.5)";
//can be used to fill as red object with opacity of 0.5

达到预期效果的完整代码将是这样的。

 // JavaScript Code

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var centerleftX = canvas.width / 4;
 var centerRightX = 3 * canvas.width / 4;
 var centerY = canvas.height / 2;
 var radius = 70;

 context.beginPath();
 context.rect(0, 0, 400, 200);
 context.fillStyle = 'rgb(200,200,200)';
 context.fill();
 context.lineWidth = 7;
 context.strokeStyle = 'black';
 context.stroke();


 context.beginPath();
 context.arc(centerleftX + 50, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = "rgba(0, 0,255,0.7)";
 context.fill();


 context.beginPath();
 context.arc(centerRightX - 50, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = "rgba(255, 0,0,0.7)";
 context.fill();

 
 <!-- HTML Code -->
<canvas id="myCanvas" width="400" height="200">