Canvas canvases in the HTML5 (ii)

Drawing Pictures

I. Draw the picture context.drawimage () (i.e. put the picture in the canvas)

var image = new Image (); Create a Picture object first
IMAGE.SRC = ' Location of picture ';

1. Context.drawimage (image,20,20); Three parameters 1. Picture 2.x axis position 3.y axis position the original size of the picture

2. Context.drawimage (image,0,0,300,400)//5 parameters 1. Picture 2.x axis position 3.y Axis position 4. The width of the drawing picture is 5. Height of drawing picture

3.context.drawimage (image,10,10,100,100,200,200,100,100); 9 Parameters 1. Picture Object 2.3.4.5. Parameters we intercept the position and size of the part of the picture
6, 7 parameters is the position of the new figure 8,9, the size of the image after the capture

Image.onload = function () {
Context.drawimage (image,0,0,300,400); 5 parameters 1. Picture 2.x axis position 3.y axis position 4. Width of the drawing picture 5. Height of drawing picture

｝

Two. Change the color of the image pixel context.putimagedata ()

Concept: Modify the R, G, B, a value of each pixel in the ImageData array, and then call the Putimagedata method to draw;

Draw text

Fill text : context.filltext (text,x,y) //solid text x: The x-axis of the beginning of the text y: The y-axis of the beginning of the text  

Draw Text Outline : context.stroketext (text,x,y) //Hollow text

Draw Text style:context.font: ' 40px Arial '; //40px-size Arial

Horizontal alignment: context.textalign: ( Start, end, right, center);

Vertical alignment: context.textbaseline ( top, hanging, middle, alphabetic, ideographic, bottom);

Here's the code and the input style:

Context.font = ' 40px Arial ';
var text = ' Fill example demo ';
Context.filltext (text,100,100);
Context.stroketext (text,100,150);

Stores

Context.save (): This method is called to save the state and attributes of the current context (he is understood as a game archive)

Recovery

Context.restore (): Call this method to revert to the State, property (game back) of the context when save

Draw Bezier Curves

Context.beziercurveto (x1,y1,x2,y2,x3,y3); (X1,Y1) The second control Point (x3,y3) anchor Point of the first control point (X2,Y2)

Draw a two-time spline curve

Context.quadraticcurveto (x1,y1,x2,y2); (x1,y1) control Point (x2,y2) Anchor Point

Tiling of pictures

Context.createpattern (image, no-repeat | | Repeat-x | | Repeat-y | | repeat) ;

No-repeat uneven Paving repeat-x along the x-axis repeat-y tile along the y-axis reoeat full tile

Clipping of pictures

Context.clip () ///Draw only images within the enclosed path area, without drawing an external image of the path, when used 1. Create a cropping area first 2. Redraw the image again

Canvas canvases in the HTML5 (ii)