javascript - html5 Canvas 上的发光效果?

标签 javascript html5-canvas glow

是否可以在已绘制的 Canvas 上添加发光效果而无需自己计算? (使用渐变、阴影或其他东西...)

我尝试通过将 Canvas 作为图像绘制到不同的 Canvas 上,然后将其绘制回来并添加阴影来添加发光效果。 它的问题是它取决于阴影周围的像素数量 - 因为它使图像模糊 - 所以这还不够好。

最佳答案

有一个网站介绍了 Canvas 文本的发光效果以及其他打印效果 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

关于javascript - html5 Canvas 上的发光效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7814398/

相关文章:

css - 清除 HTML <canvas> 中字体路径的像素

javascript - Canvas 旋转对象关于动态点

css - 即使光标不在文本上,文本也会发光

javascript - Safari 在转换期间意外地随机发光

javascript - 如何在 AngularJS 上触发另一个 Controller ?

javascript - 如何从集合中获取json对象键名并迭代

javascript - 如何在 ReactJS 的 Leaflet 图表中为数组中的标记添加多个坐标

javascript - 尝试循环 ajax 加载调用

javascript - 如果在 Canvas 上调用 2d 上下文,Webgl 上下文为 null

gnuplot - gnuplot 中的发光( NEON )效果