Shulou(Shulou.com)06/01 Report--

This article is about how to achieve multiple shadow glow effect in html5. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

shadow

Some people might say that this can actually be done with shadows. But as you can see from the picture, it is a relatively strong lighting effect. In practical application, we will find that it is difficult to achieve such a strong luminous effect with simple shadow parameters.

For example:

ctx.shadowColor = 'rgba(255,0,0,1)'; ctx.shadowBlur =10; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = 'rgba(0,0,255,1.0)'; ctx.fillRect(100,100,200,100);

For simple shadow effects, shadowBlur represents the shadow radius. When the shadow radius is large, the shadow will spread more, but the shadow intensity is not enough. When the radius of the shadow is small, the intensity of the shadow is sufficient, but the diffusion of the shadow will be small.

multiple shadows

How to achieve strong shadow intensity and good shadow diffusion? That is to achieve this relatively strong lighting effect. Well, the answer is to use multiple shadows.

The so-called multiple shadow effect, the use of shadow effect on the graphics for multiple draws, multiple draws in the process, shadowBlur value will be different, so that you can form multiple shadows superimposed effect.

Here's a simple example. The code looks like this.

ctx.shadowColor = 'rgba (255,255,0,1)'; ctx.shadowBlur = 20; ctx.shadowOffsetX = 10100; ctx.shadowOffsetY = 10100; ctx.beginPath(); ctx.fillStyle = 'rgba (0,0,255,1.0)'; ctx.arc (-10000, -10000, 50, 0, Math.PI * 2); ctx.fill(); ctx.shadowColor = 'rgba (255,0,0,1)'; ctx.shadowBlur = 20; ctx.shadowOffsetX = 10100; ctx.shadowOffsetY = 10100; ctx.beginPath(); ctx.fillStyle = 'rgba (0,0,255,1.0)'; ctx.arc(-10000, -10000, 30, 0, Math.PI * 2); ctx.fill(); Thank you for reading! About "how to achieve multiple shadow lighting effect in html5" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.