Very handy canvas.

first, basic usage

1. To use a canvas element, you need to set its width and height to size the drawing area first. The text in the middle of the canvas is displayed when the browser does not support canvas.

<width= "1500px" height= "1500px" id= ' drawing '>do not support. </Canvas>         

2. The drawing context:

To draw on canvas, you need to get the context through the GetContext method. You can get the 2d context by passing in the parameter "2d". Before calling the GetContext method, determine whether the method exists.

var Drawing=document.getelementbyid ("Drawing");  if (drawing.getcontext) {// Determine if the method exists          var context=drawing.getcontext (' 2d ');  //}

Second, common 2D context drawing method

1. Fill the rectangle:

Fills the graphic with the specified color, picture, and so on.

• FillStyle: Can be a string, gradient object, pattern object, etc., used to set the effect of the filled area;
• FillRect (X,Y,W,D): Fills the canvas with the specified rectangular area, and the effect uses the settings in FillStyle. The method has four parameters: x-coordinate, y-coordinate, width, height.
• Clearrect (X,Y,W,D): Clears the specified area on the canvas. The method has four parameters: x-coordinate, y-coordinate, width, height.

Draw Red Rectangle context.fillstyle= "Red";         Context.fillrect (10,10,50,50);    // draw Blue Translucent hold context.fillstyle= "RGBA (0,0,255,0.5)"; Context.fillrect (30,30,50,50);  clear the middle small rectangular block context.clearrect (35,40,10,10);        

Operating effect:

2. Draw a rectangle

• LineWidth: Sets the width of the border line;
• LineJoin: The line where the graphic is set intersects is round, bevel, Mitel;
• Shadowcolor: Set the shadow color with CSS color;
• Shadowoffsetx: The shape or shadow x-axis direction offset value, default is 0;
• Shadowoffsety: The shape or shadow x-axis direction offset value, default is 0;
• Shadowblur: The number of blurred pixels, which defaults to 0.

// border width context.linewidth=10; // set shadow Context.shadowoffsetx=5 ;context.shadowoffsety=5;context.shadowblur=4;// line corner context.linejoin= "Round" // draw the red rectangle context.strokestyle= "Red"  draw green rectangle context.strokestyle= "Green"             

3. Draw the Path

You can draw a path to draw complex lines and shapes. Several common methods:

Prepare to draw:

• Beginpath (): The method is called before drawing the path, indicating that the path is about to be drawn;

Draw:

• MoveTo (x, y): Moves the drawing cursor from the current point to (x, y) without drawing a line;
• LineTo (x, y): Draws a line from the previous bar until (x, y).
• Arc (x,y,radius,start,end,counterclockwise): Draws the center of (x, y), radius radius, start angle start, and end-angle arc. The last parameter indicates whether to calculate in a counterclockwise direction.

End Drawing:

• Context.closepath ();//End Drawing
• Context.fill ();//Fill area
• Context.stroke ();//Stroke

coordinates origin move context.translate (400,110); context.linewidth=1;  Complex lines context.beginpath (); Context.arc (0,0,100,0,2*math.pi,false); Context.moveto (102,0); Context.arc (0,0,103,0,2*math.pi,false); Context.closepath ();  End Drawing            

4. Drawing text

Formatting text:

• Font: Sets the typeface, color, and size of the text;
• TextAlign: text alignment, including Start,end,center;
• Textbaseline: The baseline of the text.

Draw text:

Filltext (Text,x,y): Draws the text with the FillStyle property, where the parameter text is the text content to be drawn, and X, y represents the coordinate position.

//Draw text

Context.font= "Bold 14px"; context.textbaseline= "Middle";context.textalign= "center"; Context.filltext ( "0,-90",context.filltext ("3", 90,0), Context.filltext ("6", 0,90); Context.filltext ("9", -90,0// Draw the dial hand Context.moveto (0,0), Context.lineto (70,0); Context.moveto (0,0); Context.lineto (0,-80  ); Context.stroke ();           

5. Drawing Images

To draw the image onto the canvas, you need to call the DrawImage method. The method has a maximum of 9 parameters:

DrawImage (image, source image x-coordinate, source image y-coordinate, source image width, source image height, target image x-coordinate, target image y-coordinate, target image width, target image height).

 var img=document.getelementbyid ("img"); Context.drawimage (img,0,0,112,150,300,100,112,150); Context.drawimage (img,0,0,112,150,390,220,56,75);  

6. Mode

The pattern is to use a repeating image to fill or stroke the effect.

Createpattern (Image,pattern): This method is used to create a new schema. The first parameter is an image object, and the second parameter represents how the image repeats: Repeat,repeat-x,repeat-y,no-repeat.

var Pattern=context.createpattern (img, "repeat"); context.fillstyle=Pattern;context.fillrect ( 0,400,300,300); 

7. Gradient Canvasgradient

① Create a linear gradient:

The linear gradient first calls the method to create the gradient object: createlineargradient (start x coordinate, start y coordinate, end x coordinate, end y coordinate);

The method is then called to specify the color label: addcolorstop (x, y) where x is the value between 0-1 and Y is the color that the CSS represents.

Then call FillStyle or Strokestyle to set it to a gradient object.

linear gradient var gradient=context.createlineargradient ( -200,200,-100,300); gradient.addcolorstop (0, ' white ' ); Gradient.addcolorstop (1, ' black '); context.fillstyle=Gradient;context.fillrect ( -200,200,100,100);  

② Create a radial gradient:

Create gradient object: Call createradialgradient (start center x coordinate, start center y coordinate, start circle radius, end Circle x coordinate, end Circle Y coordinate, end circle radius);

Call the Addcolorstop () method to set the color label;

Set FillStyle or Strokestype as a radial gradient object.

radial Gradient var gradientr=context.createradialgradient (200,200,10,200,200,100); gradientr.addcolorstop (0, ' White '); Gradientr.addcolorstop (1, ' Blue '); context.fillstyle=Gradientr;context.fillrect ( 100,100,200,200);     

varContext = document.getElementById ("MyCanvas");if(Context.getcontext) {//Judging Method    varcontext = Context.getcontext (' 2d ');//Create ContextContext.fillrect (0,0,100,100);//FillStyle default is blackContext.fillstyle = "Red"; Context.fillrect (120,0,100,100); Context.strokerect (0,120,100,100);//strokestyle default is blackContext.strokestyle = "Blue"; Context.strokerect (120,120,100,100); Context.fillstyle= "Rgba (0,0,255,0.5)";//Set TransparencyContext.fillrect (0,240,100,100); Context.clearrect (50,270,10,10);//Clear Small rectanglesContext.linewidth= 10;//Set Box width    //Set ShadowContext.shadowoffsetx = 5; Context.shadowoffsety= 5; Context.shadowcolor= "Rgba (0,0,0,0.5)"; Context.shadowblur= 4; Context.strokestyle= "Red"; Context.strokerect (120,240,100,100); //at the corner of the lineContext.linejoin = "Round"; Context.strokerect (0,360,100,100); //Coordinate Origin movementContext.translate (120,360); Context.linewidth= 1; Context.fillrect (0,0,100,100); Context.translate (240,-240); //Complex LinesContext.beginpath (); Context.arc (0, Max, 0, Math.PI * 2,true); //Context.moveto (100,0);Context.arc (0,0,103,0,2*math.pi,false); Context.closepath ();//Draw EndContext.fillstyle = "Rgba (0,0,255,0.5)"; Context.fill ();}

View Code

Transferred from: http://www.cnblogs.com/janes/p/3843191.html

Very handy canvas.