캔버스 요소에 그림자 추가 (요소 투명 유지)

Question

HTML5 캔버스에 원 모양이 있습니다. 그림자 스타일을 지정하고 싶지만 스토크를 표시하지 않으므로 스 토크는 0이어야하고 그림자가 있어야합니다.

context.beginPath(); 
context.lineWidth = 5; 
context.shadowColor = 'black'; 
context.strokeStyle = "rgba(255,0,0,1)"; 
context.shadowBlur = 10; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.arc(x, y, 45, 0, 2 * Math.PI, false); 
context.stroke(); 
context.restore(); 
context.save(); 

내가 온라인 유사한 방법을 찾았지만 그것이 정직하게 내가 이해 해달라고 작동하지 않습니다

여기 내 코드입니다.

context.beginPath(); 
context.lineWidth = 10; 
RGraph.setShadow({'context': context}, 'black', 0, 0, 15) 
context.arc(mouseXY[0], mouseXY[1], radius + 5, 0, 2 * Math.PI, false); 
context.stroke(); 

보이지 않는 모양에 그림자를 넣으려는 아이디어가 있습니까?

Answer 1

쉬운 트릭은 스트로크 오프 스크린 그래서 문맥을 이동하고, 올바른 위치에 다시 그림자를 이동하는 것입니다.

간단!

var context = canvas.getContext("2d"); 
 

 
var x= 60, y=60, r=40; 
 

 
var trickShift = { x:10000, y:1000} ; 
 

 
context.save(); 
 
context.beginPath(); 
 
context.translate(-trickShift.x, -trickShift.y); 
 
context.lineWidth = 5; 
 
context.shadowColor = 'black'; 
 
context.strokeStyle = '#000'; "transparent"; 
 
context.shadowBlur = 15; 
 
context.shadowOffsetX = trickShift.x + 100; 
 
context.shadowOffsetY = trickShift.y + 100; 
 
context.arc(x-100, y-100, r, 0, 2 * Math.PI, false); 
 
context.stroke(); 
 
context.restore();

<canvas id="canvas"></canvas>

Answer 2

사용 createRadialGradienthttps://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.createRadialGradient

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); 

var context = canvas.getContext("2d"); 
 
var x=80, y=80; 
 
var rg = context.createRadialGradient(x, y, 35, x, y, 45); 
 
rg.addColorStop(0, 'rgba(0,0,0,0.4)'); 
 
rg.addColorStop(1, 'rgba(0,0,0,0)'); 
 

 
context.strokeStyle = rg; 
 
context.beginPath(); 
 
context.arc(x, y, 40, 2 * Math.PI, false); 
 
context.lineWidth = 10; 
 
context.stroke(); 
 
context.restore();

<canvas id="canvas"></canvas>