Canvas related knowledge in html5 (3) API-strokeStyle-shadow, html5canvasapi

Canvas related knowledge in html5 (3) API-strokeStyle-shadow, html5canvasapi
Definition and usage of strokeStyle

The strokeStyle attribute sets or returns the color, gradient, or mode used for the stroke.

Context. strokeStyle = color | gradient | pattern; // CSS color value indicating the fill color of the drawing | linear or radioactive gradient object used to fill the drawing | pattern object used to fill the drawing

Instance 1 draws a rectangle. Use gradient strokes:

<Canvas id = "canvas" width = 300 height = 150> </canvas> <script> var c = document. getElementById ("canvas"); var ctx = c. getContext ("2d"); var gradient = ctx. createLinearGradient (,); gradient. addColorStop ("0", "magenta"); gradient. addColorStop ("0.5", "blue"); gradient. addColorStop ("1.0", "red"); // fill ctx with gradient. strokeStyle = gradient; ctx. lineWidth = 10; ctx. strokeRect (100,25, 100,100); </script>

The size of the rectangle is 100*100, and the Border width is 10. The actual size is 110*110, that is, the total width = width + Border width, rather than ordinary box model, the total width = width + Border Width * 2

Instance 2 uses a gradient stroke to write the text "canvas example"

<Canvas id = "canvas" width = 300 height = 150> </canvas> <script> var c = document. getElementById ("canvas"); var ctx = c. getContext ("2d"); ctx. font = "30px arial"; var gradient = ctx. createLinearGradient (0, 0, c. width, 0); gradient. addColorStop ("0", "magenta"); gradient. addColorStop ("0.5", "blue"); gradient. addColorStop ("1.0", "red"); // fill ctx with gradient. strokeStyle = gradient; ctx. strokeText ("canvas example", 40, 80); </script>

ShadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY

Set the shadow color, blur level, horizontal, and vertical distance.

context.shadowColor=color;
context.shadowBlur=number;
context.shadowOffsetX=number;
context.shadowOffsetY=number;

Instance 1 draws a red rectangle shadow with a blur level of 30

<Canvas id = "canvas" width = 300 height = 150> </canvas> <script> var myCanvas = document. getElementById ("canvas"); var cc = myCanvas. getContext ("2d"); cc. fillStyle = "# ff0000"; cc. shadowBlur = 30; cc. shadowColor = "# ff0000"; cc. fillRect (100,100,); // four parameters correspond to: x, y, w, h </script>

 

When the shadow offset of X \ Y is not defined, the four sides are radiating forward.

Set x y shadow offset based on the original

<Canvas id = "canvas" width = 300 height = 150> </canvas> <script> var myCanvas = document. getElementById ("canvas"); var cc = myCanvas. getContext ("2d"); cc. fillStyle = "# ff0000"; cc. shadowBlur = 30; cc. shadowOffsetX = 15; cc. shadowOffsetY = 15; cc. shadowColor = "# ff0000"; cc. fillRect (100,100,); // four parameters correspond to: x, y, w, h </script>

ShadowOffsetX = 0 indicates that the shadow is located at the bottom of the shape.

ShadowOffsetX = 20 indicates that the shadow is located at 20 pixels on the right of the left side of the shape.

ShadowOffsetX =-20 indicates that the shadow is located at 20 pixels on the left of the left side of the shape.

ShadowOffsetY = 0 indicates that the shadow is located at the bottom of the shape.

ShadowOffsetY = 20 indicates that the shadow is at 20 pixels below the top position of the shape.

ShadowOffsetY =-20 indicates that the shadow is at 20 pixels above the top position of the shape.