Detailed explanation of HTML5 canvas (5)

drawImage provides a total of three methods:

1. Position the image on the canvas.

context.drawImage(img,x,y);

2. Position the image on the canvas and specify the width and height of the image.

context.drawImage(img,x,y,width,height);

3. Crop the image and position the cropped part on the canvas.

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parameters	Description
img	Specifies the image, canvas, or video to use.
sx	The x-coordinate position at which to start cutting the image.
sy	The y-coordinate position of the image to start cutting.
swidth	The width of the cut image.
sheight	The height of the clipped image.
x	Place the x coordinate position of the image on the canvas.
y	Place the y coordinate position of the image on the canvas.
width	The width of the image to be drawn. (Stretch or shrink the image)
height	The height of the image to draw. (Stretch or shrink the image)

The following code contains the above three methods of drawing images onto canvas:

    
    
    



    
        您的浏览器不支持canvas
    
    
        您的浏览器不支持canvas
    
    
        您的浏览器不支持canvas
    
    

The effect is as follows:

The first picture: context.drawImage(img, 0, 0) starts drawing from canvas (0,0) and draws the original size of the image.
The second picture: context.drawImage(img, 0, 0, 500, 300) means that it starts drawing from the canvas (0,0), and specifies that the width and height of the drawn image are 500 and 300 respectively, so the original image will be stretched or shrunk.
The third picture: context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200); means cutting the part with a width and height of 200 and 200 respectively from the (200,100) position of the image. And place it at the (0,0) position of the canvas, and specify the width and height of the drawn image to be 200 and 200 respectively.

The above is the detailed content of Detailed explanation of HTML5 canvas (5). For more information, please follow other related articles on the PHP Chinese website!