当前位置：文江博客话题详情

html5画布上的发光效果？

发布于 2024-12-10 09:43:34 字数 165 浏览 0 评论 0原文

是否可以在已经绘制的画布上添加发光效果而无需自己计算？（使用渐变、阴影或其他东西...）

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫瑟鸿黎 2024-12-17 09:43:34

有一个网站介绍了画布文本的发光效果以及其他印刷效果此处。

这是发光效果的要点：

// 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

There is a website that goes over the glow effect along with other typographic effects for canvas text here.

Here's the gist of the glow effect:

// 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

回复收藏 0 原文

~没有更多了~