我之前已经看过这个问题,但是给出的答案是针对通过路径绘制的画布图像,但是,我正在绘制图像。
是否可以创建一个inset-shadow
?
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = 'rgba(30,30,30, 0.4)';
var imgOne = new Image();
imgOne.onload = function() {
context.drawImage(imgOne, 0, 0);
};
imgOne.src = "./public/circle.png";
所以我画了圆圈图片。我现在在圆的外面有一个小阴影,我怎么能inset
代替它offset
呢?
画布会在图像从不透明变为透明的地方阴影,因此,正如K3N在他的正确答案中所示,您可以将图像内翻(不透明变成透明,反之亦然),以便将阴影绘制在圆圈内。
如果您知道圆的中心点和半径,则可以使用描边路径创建插入的圆阴影。这是一个例子:
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
context.beginPath();
context.arc(cw/2,ch/2,75,0,Math.PI*2);
context.fillStyle='lightcyan';
context.fill();
context.globalCompositeOperation='source-atop';
context.shadowOffsetX = 500;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.shadowColor = 'rgba(30,30,30,1)';
context.beginPath();
context.arc(cw/2-500,ch/2,75,0,Math.PI*2);
context.stroke();
context.stroke();
context.stroke();
context.globalCompositeOperation='source-over';
<canvas id="canvas" width=300 height=300></canvas>
如果您的路径不规则或很难用数学定义,则还可以使用边缘路径检测算法。一种常见的边缘路径算法是Marching Squares。Stackoverflow的K3N已经编写了一个不错的Marching Squares算法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句