Canvas canvases in the HTML5 (ii)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.