html5画布上的发光效果？

【问题标题】：A glow effect on html5 canvas?html5画布上的发光效果？
【发布时间】：2023-03-09 00:49:01
【问题描述】：

是否可以在已经绘制好的画布上添加发光效果无需自己计算？（使用渐变、阴影之类的……）

我尝试通过将画布作为图像绘制到不同的画布并在添加阴影的情况下将其绘制回来来添加光晕。它的问题在于它取决于阴影周围的像素数量 - 因为它会使图像模糊 - 所以这还不够好。

【问题讨论】：

【解决方案1】：

有一个网站介绍了发光效果以及画布文本here的其他排版效果。

以下是发光效果的要点：

// Assuming your canvas element is ctx

// Color of the shadow;  RGB, RGBA, HSL, HEX, and other inputs are valid.
ctx.shadowColor = "red"; // string

// Horizontal distance of the shadow, in relation to the text.
ctx.shadowOffsetX = 0; // integer

// Vertical distance of the shadow, in relation to the text.
ctx.shadowOffsetY = 0; // integer

// Blurring effect to the shadow, the larger the value, the greater the blur.
ctx.shadowBlur = 10; // integer

【讨论】：