HTML5 ten new Features (iv)--canvas drawing

H5 introduced the canvas label, which by default is a 300*150 inline-block. The width of the canvas can only be specified with its own width and height properties, not the width, height, in CSS styles.

First, get the ' brush ' object, and all of the canvas's tasks need it to execute

var ctx=canvas.getcontext (' 2d ');

Second, some of the common canvas properties

FillStyle: Fill Style

Strokestyle: Stroke Style

LineWidth: Stroke width

Font: The size and type of fonts used to draw text

Textbaseline: The baseline of text to which

Shadowoffsetx, shadowoffsety: Shadow Offset

Third, use canvas to draw graphics

1. Draw a rectangle

Ctx.fillrect (X,Y,W,H): Fills a rectangle

Ctx.strokerect (x,y,w,h): Stroke a rectangle

Ctx.clearrect (x,y,w,h): Clears content within a rectangular range

2. Draw Text

Ctx.filltext (txt,x,y) Fill text

Ctx.stroketext (txt,x,y) Stroke text

Ctx.measuretext (TXT) measurement

* Note that the anchor point of the text is the default at the starting point of the text baseline (alphabetic)!

3. Add shadow to graphic text

Example: ctx.shadowcolor= ' #000 ';//color

ctx.shadowoffsetx=8;//Horizontal Offset

ctx.shadowoffsety=8;//Vertical Offset

ctx.shadowblur=10;//Blur Radius

4. Use gradient color when drawing

Ctx.createlineargradient (X1,Y1,X2,Y2): Creating a linear Gradient object

Ctx.createradialgradient (X1,Y1,R1,X2,Y2,R2): Creating a Radial Gradient object

Ctx.addcolorstop: Adding color points

5. Draw the path

Ctx.beginpath (): Start path

Ctx.closepath (): End Path

Ctx.moveto (x, y): Move to a specified point

Ctx.lineto (x, y): Draw a straight path to a specified point

Ctx.arc (): Drawing an arched path

Ctx.ellipse (): Drawing an elliptical path

Ctx.beziercurveto (): Draw Bezier Path

Ctx.linjoin (): Modify the style at the polyline inflection point

6. Drawing Images

Ctx.drawimage ()

7. Changes and modifications to the drawing context state

Ctx.translate (x, y): The axis origin moves to the specified point

Ctx.rotate (): Rotate Brush

Ctx.scale (): Brush Scaling

Ctx.save (): Saves the current morph data in the drawing context

Ctx.restore (): Restores the state associated with the last saved transformation

Canvas is a pure JS implementation of the technique of drawing bitmaps.

HTML5 ten new Features (iv)--canvas drawing