캔버스에서 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">