HTML5 concise tutorial-1.1.1.HTML5Canvas reference manual shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, html5shadowcolor

HTML5 concise tutorial-1.1.1.HTML5Canvas reference manual shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, html5shadowcolor

Link: http://blog.csdn.net/tomorrow13210073213/article/details/42386597

Indicate the source for reprinting.

The HTML5 canvas provides the element shadow function. Its main attributes include shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY. ShadowColor defines the shadowColor style, shadowBlur defines the shadow blur coefficient, shadowOffsetX defines the Shadow X axis offset, and shadowOffsetY defines the shadow Y axis offset.

The canvas attributes mentioned above are shadow-related and are not described separately.

Property 1: shadowColor

Property name: shadowColor

Property Description: Specifies the shadowColor attribute or returns the color of the shadow.

Default attribute value: #000000

Property Value: color value. Only color values (Color Words, #000000, rgba) can be defined.

Js Syntax: context. shadowColor = color;

Note: After shadowColor is defined, at least shadowBlur must be used to define the shadowColor blur coefficient. Otherwise, the shadowBlur will not be able to see the shadowColor effect.

Property 2: shadowBlur

Property name: shadowBlur

Property Description: shadowBlur attribute setting or return the Blur coefficient of the shadow.

Default attribute value: 0, not fuzzy

Attribute Value: Number.

Js Syntax: context. shadowBlur = number;

Note: As mentioned above, after shadowColor is defined, at least shadowBlur must be used to define the shadowBlur; otherwise, the shadowColor effect will not be displayed.

Attribute 3: shadowOffsetX

Property name: shadowOffsetX

Property Description: The shadowOffsetX Property sets or returns the horizontal distance between the shape and the shadow, or the X axis offset.

Default attribute value: 0. The shadow is not offset and is located at the bottom of the element.

Attribute Value: Number.

Js Syntax: context. shadowOffsetX = number;

Parameter Value: number defaults to 0 (not offset, located at the bottom of the element), positive (offset to the positive direction of the X axis), and negative (offset to the negative direction of the X axis ).

Attribute 4: shadowOffsetY

Property name: shadowOffsetY

Property Description: The shadowOffsetY Property sets or returns the vertical distance between the shape and the shadow, or the Y axis offset.

Default attribute value: 0. The shadow is not offset and is located at the bottom of the element.

Attribute Value: Number.

Js Syntax: context. shadowOffsetY = number;

Parameter Value: number defaults to 0 (not offset, located at the bottom of the element), positive (offset to the positive side of the Y axis), and negative (offset to the negative side of the Y axis ).

Shadow-related attributes are relatively simple and will not be described in detail. Only the relevant test code is posted as follows:

The test code is as follows:

<! DOCTYPE html> The running effect is as follows:





Link: http://blog.csdn.net/tomorrow13210073213/article/details/42386597
Indicate the source for reprinting.