HTML5 knowledge of canvas (ii) Api-fillstyle

colors, styles, and shadows

FillStyle Sets or returns the color, gradient, or pattern used to fill the drawing

Definition and usage

context.fillstyle=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

Example One: Rectangle Drawing is also the simplest way to use it.

Context.fillstyle=color

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varMyCanvas=document.getElementById ("Canvas"); varcc=Mycanvas.getcontext ("2d"); Cc.fillstyle= "#ff0000"; Cc.fillrect (100,25,100,100);//four parameters correspond: X,y,w,h</Script>

Example two: A gradient from top to bottom, filled with rectangles.

Context.fillstyle=gradient

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varMyCanvas=document.getElementById ("Canvas"); varcc=Mycanvas.getcontext ("2d"); varmygradient=Cc.createlineargradient (0,0,0, the); Mygradient.addcolorstop (0,"#ff0000"); Mygradient.addcolorstop (1,"#ffcc00"); Cc.fillstyle=mygradient; Cc.fillrect ( -, -, -, -);</Script>

The Createlineargradient () method creates a linear gradient object.

Gradients can be used to fill rectangles, circles, lines, text, and so on.

Tip: Use this object as the value of the Strokestyle or FillStyle property.

Tip: Use the Addcolorstop method to specify a different color and where to position the color in the gradient object.

Context.createlineargradient (x0,y0,x1,y1);//The x-coordinate of the start point of the gradient, the y-coordinate of the start point of the gradient, the x-coordinate of the gradient end point, the y-coordinate of the gradient end

Example three: Define a gradient from left to right, from black to red to white, as the fill style of the rectangle:

<CanvasID= "Canvas"width=300Height=150></Canvas><Script>    varMyCanvas=document.getElementById ("Canvas"); varcc=Mycanvas.getcontext ("2d"); varmygradient=Cc.createlineargradient ( -,0, $,0); Mygradient.addcolorstop (0,"Black"); Mygradient.addcolorstop (0.5,"Red"); Mygradient.addcolorstop (1," White"); Cc.fillstyle=mygradient; Cc.fillrect ( -, -, -, -);</Script>

Example four: Drawing fills

Context.fillstyle=pattern

<PAlign= "Center"><imgsrc= "Img/lamp.gif"ID= "lamp"alt=""></P><CanvasID= "Canvas2"width=300Height=150></Canvas><Script>    varimg=document.getElementById ("Lamp"); functionDrawimgrepat () {varC=document.getElementById ("CANVAS2"); varCTX=C.getcontext ("2d"); varPat=Ctx.createpattern (IMG,"Repeat");//repeat|repeat-x|repeat-y|no-repeatCtx.rect (0,0, -, the); Ctx.fillstyle=Pat;    Ctx.fill (); } img.onload=Drawimgrepat;</Script>

Here is a little bit of a problem: 1, the picture needs to be in the page, 2, rect (0,0,128,96), if the change began x.y coordinates, found that the picture is not complete, that is, the image is always the starting position is 0,0

HTML5 knowledge of canvas (ii) Api-fillstyle