canvas - 在 HTML5 画布中，如何在不影响阴影颜色 alpha 的情况下更改描边 alpha？

Question

我正在尝试按照此处找到的示例绘制内部阴影。我正在尝试对其进行一些修改，以使笔划完全透明，例如：

ctx.strokeStyle = 'rgba(0, 0, 0, 0.0)';

然而，这导致我的阴影 alpha 也变为 0.0，尽管我也定义了这条线：

ctx.shadowColor = 'rgba(0, 0, 0, 1.0)';

尽管描边样式为 0.0，有没有一种方法可以强制阴影的 alpha 保持在 1.0？我不想显示笔画，我只想显示阴影。

Answer 1

诀窍是偏移形状，使形状在画布之外，阴影在里面。

这样我们就不需要考虑原始形状的颜色 - 或者 - 如果我们希望它部分透明，我们可以复制路径并稍后在顶部绘制。

例如：

var offset = 1000;

/// to keep original points of shape we just translate
ctx.translate(-offset, 0);

/// create some shape, here a line
ctx.moveTo(10, 10);
ctx.lineTo(400, 300);
ctx.lineWidth = 5;

/// define shadow, KEY: offset X shadow (or y if prefered=
ctx.shadowOffsetX = offset;
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 16;

/// draw the shape
ctx.stroke();

/// translate back, or use save/restore
ctx.translate(offset, 0);

在线演示在这里