Javascript 如何为画布形状设置圆形内部阴影？

在我的画布中，我有一个随着光标移动的圆形。 我试图给它一点内在的阴影，但它不起作用

以下是代码和演示：

我注意到，如果添加context.clip，此设置将起作用；但这会使整个画布崩溃

---

有没有办法给这个圆画一个内部阴影？

试着在提供边框的弧之前画一个提供阴影的弧。在beginPath之前保存上下文状态，并在阴影弧的斯托克之后恢复它。您需要使阴影弧半径小于框架弧，以便阴影的外边缘被框架弧的笔划覆盖。阴影弧外部的外部阴影仍被绘制，但被框架弧覆盖

例如：

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

context.save();
context.beginPath();
context.lineWidth = 6;
context.arc(x, y, 50, 0, 2 * Math.PI);
context.stroke();
context.restore();

您需要调整圆弧的大小、颜色和线宽，以获得所需的效果

如果mousemove等繁忙处理程序中的doing.clip正在破坏您的浏览器，您可以在应用程序开始时使用内部阴影预先构建一次圆圈，然后重新使用该预先构建的圆圈，对性能几乎没有影响

下面是如何创建内存画布，其中包含带内部阴影的圆。是的，它使用.clip，但在应用程序开始时只使用一次

var PI2=Math.PI*2;
var cut=document.createElement('canvas');
var cutCtx=cut.getContext('2d');
cut.width=100;
cut.height=100;
cutCtx.arc(50,50,50,0,Math.PI*2);
cutCtx.closePath();
cutCtx.clip();
cutCtx.shadowColor='black'
cutCtx.shadowBlur=15;
for(var i=0;i<15;i++){
    cutCtx.stroke();
}

移动鼠标以显示下面的图像

---

我刚刚为这种情况创建了Inset.js

插图js 仅需要设置ctx.shadowInset=true

例如：

var PI2=Math.PI*2;
var cut=document.createElement('canvas');
var cutCtx=cut.getContext('2d');
cut.width=100;
cut.height=100;
cutCtx.arc(50,50,50,0,Math.PI*2);
cutCtx.closePath();
cutCtx.clip();
cutCtx.shadowColor='black'
cutCtx.shadowBlur=15;
for(var i=0;i<15;i++){
    cutCtx.stroke();
}

var ctx = canvas.getContext("2d");
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;

// Set up circle styles.
ctx.shadowInset = true;
ctx.shadowBlur = 15;
ctx.shadowColor = 'black';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = 'red';

// Set up mouse listener.
document.addEventListener('mousemove', function(e) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(e.clientX, e.clientY, 30, 0, 2 * Math.PI);
    ctx.fill();
});