HTML5 knowledge of Canvas (iii) Api-strokestyle-shadow related

Strokestyle Definition and usage

The Strokestyle property sets or returns the color, gradient, or pattern used for the stroke.

context.strokestyle=color|gradient|pattern;//a CSS color value that indicates the drawing fill color | The Gradient object used to fill the drawing linear or radioactive | The Pattern object used to fill the drawing

Instance 1 draws a rectangle. Using gradient strokes:

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>varC=document.getElementById ("Canvas");varCTX=C.getcontext ("2d");varGradient=Ctx.createlineargradient ( -,0, $,0); Gradient.addcolorstop ("0","Magenta"); Gradient.addcolorstop ("0.5","Blue"); Gradient.addcolorstop ("1.0","Red");//fill with a gradientCtx.strokestyle=Gradient;ctx.linewidth=Ten; Ctx.strokerect ( -, -, -, -); </Script>

Defined rectangle size 100*100, border width of 10, the actual size is 110*110, that is, the total width = width + border width, rather than the usual box model to understand the total width = width + Border Width

Example 2 using a gradient stroke to write the text "canvas Example"

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varC=document.getElementById ("Canvas"); varCTX=C.getcontext ("2d"); Ctx.font="30px Arial"; varGradient=Ctx.createlineargradient (0,0, C.width,0); Gradient.addcolorstop ("0","Magenta"); Gradient.addcolorstop ("0.5","Blue"); Gradient.addcolorstop ("1.0","Red"); //fill with a gradientCtx.strokestyle=gradient; Ctx.stroketext ("Canvas Example", +, the);</Script>

Shadowcolor, Shadowblur, Shadowoffsetx, shadowoffsety

Sets the color, blur level, horizontal, and vertical distance of the shadow.

Context.shadowcolor=color;
context.shadowblur=number;
context.shadowoffsetx=number;
context.shadowoffsety=number;

Example 1 draws a red rectangle red Shadow, blur level 30

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varMyCanvas=document.getElementById ("Canvas"); varcc=Mycanvas.getcontext ("2d"); Cc.fillstyle= "#ff0000"; Cc.shadowblur= -; Cc.shadowcolor="#ff0000"; Cc.fillrect ( -, -, -, -);//four parameters corresponding to each other: X,y,w,h</Script>

When there is no shadow offset defined for the x\y, the four-sided forward radiation

Set X Y shadow offset on original basis

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varMyCanvas=document.getElementById ("Canvas"); varcc=Mycanvas.getcontext ("2d"); Cc.fillstyle= "#ff0000"; Cc.shadowblur= -; Cc.shadowoffsetx= the; Cc.shadowoffsety= the; Cc.shadowcolor="#ff0000"; Cc.fillrect ( -, -, -, -);//four parameters corresponding to each other: X,y,w,h</Script>

Shadowoffsetx=0 indicates that the shadow is directly below the shape.

SHADOWOFFSETX=20 indicates that the shadow is at 20 pixels to the right of the left position of the shape.

SHADOWOFFSETX=-20 indicates that the shadow is at 20 pixels to the left of the shape.

Shadowoffsety=0 indicates that the shadow is directly below 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.

HTML5 knowledge of Canvas (iii) Api-strokestyle-shadow related