HTML5 Canvas shadow usage demonstration

HTML5 Canvas provides four attribute values ​​​​for setting shadows:

context.shadowColor = "red" means setting the shadow color to red

context.shadowOffsetX = 0 means the horizontal distance of the shadow relative to TEXT, 0 means the horizontal position of the two Coincidence

context.shadowOffsetY = 0 indicates the vertical distance of the shadow relative to TEXT, 0 indicates that the vertical positions of the two coincide with each other

context.shadowBlur = 10 Shadow blur effect, the larger the value, the more severe the blur.

The simplest code for a rectangle with a shadow is as follows:

context.shadowColor = "RGBA(127,127,127,1)";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0, 0.8)";  
context.fillRect(10, hh+10, 200,canvas.height/4-20);

##The effect is as follows:

#Shadow text:

As long as the values ​​​​of shadowOffsetX and shadowOffsetY are set, when the values ​​​​are both positive numbers, the shadow will be offset from the lower right

of the text shift. When the values ​​are all negative, the shadow is offset relative to the upper left of the text.

3D shadow effect:

Continuously and repeatedly draw text at the same position while changing shadowOffsetX, shadowOffsetY, shadowBlur The value of

is continuously offset from small to large, and the transparency is also increasing. You get the shadow effect text.

Edge blur effect text:

Repeat in four directions based on the 3D shadow effect. The text effect of edge feathering is obtained.

Running effect:

##Program code:

	



	
HTML5 Canvas Clip Demo - By Gloomy Fish
	
Fill And Stroke Clip
	

		
	

The above is the HTML5 Canvas shadow usage demonstration and code details. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!