HTML5 new features of the canvas

1, the understanding of canvas

The canvas is a rectangular area within which the pixel control of each frame within the area can be controlled by JS.

2. js Operation Canvas Object

Canvas object. GetContext ("2d");//Get Canvas content

Set gradient

var grd=cxt.createlineargradient (0,0,175,50);

Grd.addcolorstop (0, "#FF0000")

Grd.addcolorstop (1, "#00FF00");

Ctx.fillstyle//Set Fill Color

Ctx.fillrect//Set fill position and size

Ctx.linewidth= "5"; Draw width

Cxt.strokestyle= "Red"; Draw Color

Cxt.beginpath (); Start drawing

Line drawing

Cxt.moveto (10,10); From where to start

Cxt.lineto (150,50); To where

Cxt.stroke (); How to Draw

Picture drawing

var img=new Image ()

Img.src= "Flower.png"

Cxt.drawimage (img,0,0);

Round drawing

Cxt.arc (70,18,15,0,math.pi*2,true);

Cxt.closepath (); Draw End

　　

　　

HTML5 new features of the canvas