Summary of HTML5 Canvas Drawing Foundation

First, the basic drawing

First, define the 2D rendering variable ct (here is a jquery library):

var ct = $ (#canvasId). Get (0). GetContext (' 2d ');

Here's how to draw a variety of basic graphics:

Draw Rectangle (fill/stroke)
Ct.fillrect (X,Y,W,H)
Ct.strokerect (X,Y,W,H)

Draw Path--line
Ct.beginpath ();
Ct.moveto (X0,Y0);
Ct.lineto (X1,Y1);
Ct.closepath ();
Ct.stroke ();

Draw Path--arc
Ct.beginpath ();
Ct.arc (x,y,r,start,end,true);
Ct.closepath ();
Ct.fill ();

Draw text
Ct.font = "30px serif ...";
Ct.filltext (Txt,x,y);
Ct.stroketext (Txt,x,y);

Set style
Ct.fillstyle = "RGB (r,g,b)";
Ct.strokestyle = "rgb ()";
Ct.linewidth = 5;

Copy Code

A number of flexible methods are also available:

Eraser (Erase Rectangle range)
Ct.clearrect (X,Y,W,H);

Reset Style
Canvas.attr ("width", w);



Second, advanced function

Here are some of the transformation operations on the canvas:


Ct.save ()/restore ()//Save/Restore
Ct.translate (x,y)//Pan
Ct.scale (A,B)//zoom in and zoom out
Ct.rotate (Math.PI)//round (0,0) rotation

Transformation matrix
Ct.transform (Xscale,yskew,xskew,yscale,xtrans,ytrans)
Ct.settransform (Xscale,yskew,xskew,yscale,xtrans,ytrans)//Reset



About the transformation matrix, there is a good article to deepen your understanding: http://shawphy.com/2011/01/transformation-matrix-in-front-end.html

Here are some common operations:
Copy Code

Ct.globalalpha = 0.5//Transparency

Shadow
Ct.shadowblur = 20; Diffusion
Ct.shadowoffsetx = 10;
Ct.shadowoffsety = 10;
Ct.shadowcolor = Rgba;

Gradient (linear/radioactive)
Ct.createlineargradient (X,Y,X1,Y1)
Ct.createradialgradient (X,Y,R,X1,Y1,R1)
Set Gradient's always color
Addcolorstop (0, "RGB ()")/(1, "RGB ()");



Bezier Curve Drawing:

The last two parameters are the coordinates of the end point.
Ct.beginpath ();
Ct.moveto (50,250);
Ct.quadraticcurveto (250,100,450,250)//two times Bezier curve
Ct.beziercurveto (150,50,350,450,450,250)//three times Bezier curve
Ct.stroke ();

The canvas is exported as an image:

Generate the SRC address of the picture
var imgurl = canvas.get (0). Todataurl ();
The following replaces the canvas with a picture
var img = $ ("</img>");
Img.attr ("src", imgurl);
Canvas.replacewith (IMG);



Third, picture processing

The introduction and adjustment of pictures (the transformation of the picture is the transformation of the canvas, no longer introduced):


Introducing Pictures
var img = new Image ();
IMG.SRC = ". jpg";
$ (IMG). Load (function () {
Ct.drawimage (parameter);
})

Picture adjustment
Ct.drawimage (IMAGE,X,Y,W,H)
Picture cropping and adjusting, where Dx/dy/dw/dy is a cropped parameter
Ct.drawimage (IMAGE,DX,DY,DW,DH,X,Y,W,H)

Copy Code

Advanced processing (for image pixel drawing and processing, for understanding only):
Copy Code

Imgdata objects
var imgdata = ct.getimagedata (x,y,w,h)//Get

Properties of the Imgdata object
Imgdata.width/height//Width height
Imgdata.data//Pixel collection array, representing RGBA

Creating images
var imgdata = Ct.createimagedata (w,h)
Ct.putimagedata (Imgdata,x,y)





The above are more basic knowledge points summary, not written too thin, just clear easy to check and memo, if to which point is not very clear, can copy the keyword Google.

At this point, the basic knowledge has been summed up, but the above is just the basic static canvas production, if you know how to apply JavaScript flexibly, combined with canvas can create a very beautiful animation or games. These applications have a lot of interest can find the relevant information, but first you have to learn JS.