Canvas images and clipping

Image article:

　　Code:

1 /**2 * Created by Administrator on 2016/1/28.3  */4 functionDraw (id) {5     varCanvas =document.getElementById (ID);6     varContext = Canvas.getcontext ("2d");7     varNewimg =NewImage ();8NEWIMG.SRC = "girl. jpg";9Newimg.onload =function (){Ten     //onload ensures the loading of the picture is complete One //context.drawimage (newimg,0,0); A //context.drawimage (newimg,0,0,150,200); - //context.drawimage (newimg,0,0,100,100,0,0,120,120); -     } the}

View Code

The main method used, DrawImage ().

There are three types of formats:

1) drawImage (image,x,y): Image: Object to be added, image coordinates.

2) DrawImage (image,x,y,width,height): Adds a parameter that can change the size of the image, followed by two values to determine the size of the image, which can be used for zooming.

3) DrawImage (image,sx,sy,swidth,sheight,x,y,width,height):

For the convenience of memory itself summarized as follows:

The first four values are used to determine the coordinates of the image when cut and the height of the width of the image after clipping . The image that is clipped after the image is clipped.

The next four values are used to determine the placement coordinates of the clipped image and the new width and height of the image set after the cut .

Finally, it is worth noting that the DrawImage () method can be used to place images as well as canvas and video.

You should also pay attention to the application of onload, which ensures that pictures are displayed successfully when the picture is loaded.

* When placing a canvas, you can take a picture as a canvas (background) and draw something new on it. *

Cut article:

Code:

1 /**2 * Created by Administrator on 2016/1/28.3  */4 functionDraw (id) {5     varCanvas =document.getElementById (ID);6     varContext = Canvas.getcontext ("2d");7     varNewImage =NewImage ();8Newimage.src = "Anime characters more. jpg";9Newimage.onload =function(){Ten //Context.save (); One Arcclip (context); AContext.drawimage (newimage,0,0); - //Context.restore (); -Context.globalalpha = 0.6; the FillRect (context); -     } - } - functionFillRect (context) { + Context.beginpath (); -Context.rect (150,150,90,90); +Context.fillstyle = "#f90"; A Context.fill (); at } - functionArcclip (context) { - Context.beginpath (); -Context.arc (150,150,100,0,math.pi*2,true); - Context.clip (); -}

View Code

In two cases:

1) with comment lines in the code: generates

　　

2) without comment lines in the code: generates

　　

Explanation: It is necessary to explain here the meaning of the cut here, the shearing meaning here is, cut who shows who , similar to the mask in Flash.

The main method used for clipping is clip (). The method has no parameters, just a simple clipping path.

Globalalpha () Method: equivalent to A in Rgba, is used to set the transparency.

Save () and Restore () methods: Here the Save () method is called first to save the state of the current context and restore the state of the context with restore.

That is, the state before clipping. All of the next draw is no longer the hand clipping area limit.

Canvas images and clipping