简体   繁体   English

在html5画布上有发光效果吗?

[英]A glow effect on html5 canvas?

Is it possible to add a glow effect to an already drawn canvas without having to calculate it myself ? 是否可以在自己绘制的画布上添加发光效果而无需自己计算 (Using gradients, shadow or something...) (使用渐变,阴影或其他东西...)

I have tried adding a glow by drawing the canvas as an image to a different canvas and drawing it back with a shadow added. 我尝试通过将画布作为图像绘制到其他画布并添加阴影重新绘制来添加光晕。 The problem with it is that it depends on the amount of pixels around the shadow - because it blurs the image - so that is not good enough. 它的问题在于它取决于阴影周围的像素数量-因为它会使图像模糊-因此效果还不够好。

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
ctx.shadowColor = “red” // string
    //Color of the shadow;  RGB, RGBA, HSL, HEX, and other inputs are valid.
ctx.shadowOffsetX = 0; // integer
    //Horizontal distance of the shadow, in relation to the text.
ctx.shadowOffsetY = 0; // integer
    //Vertical distance of the shadow, in relation to the text.
ctx.shadowBlur = 10; // integer
    //Blurring effect to the shadow, the larger the value, the greater the blur.

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM