在畫布中，如何繪製2個半透明重疊圓圈

Question

我想在HTML畫布中的灰色矩形上繪製兩個圓圈。

我嘗試以下步驟：

1. 填充矩形灰色

2. 變化globalComposition輕混合兩種顏色。

我只想混合藍色和紅色，而不是灰色和灰色的矩形。

Answer 1

您可以輕鬆地在rgba，其中最後一個參數將是字母或不透明度達到中用圓圈的填充樣式此屬性。語法將是這樣的

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">