HTML5 Canvas shadow usage demonstration HTML5 Canvas provides four attribute values for shadow setting: context. shadowColor = "red" indicates that the shadow color is set to red context. shadowOffsetX = 0 indicates the horizontal distance between the shadow and TEXT, and 0 indicates that the horizontal positions of the two are coincident with the context. shadowOffsetY = 0 indicates the vertical distance between the shadow and TEXT, and 0 indicates that the vertical positions of the two are coincident with the context. shadowBlur = 10 shadow blur. The greater the value, the greater the Blur. The simplest code of a shadow rectangle 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); effect: shadowOffsetX and shadowOffsetY are offset to the lower right of shadowOffsetY when values are positive. When the value is negative, the shadow is offset to the upper-left corner of the text. 3D image pulling effect: the shadowOffsetX, shadowOffsetY, and shadowBlur values are repeatedly drawn at the same position, increasing from small to large, and increasing transparency. The text of the shadow effect is displayed. Text with blurred edge effects: Based on the 3D image pulling effect, the text with blurred edges is displayed in four directions. Running Effect: program code:
<!DOCTYPE html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
