Home  >  Article  >  Web Front-end  >  Detailed explanation of HTML5 canvas (5)

Detailed explanation of HTML5 canvas (5)

黄舟
黄舟Original
2017-03-17 15:50:311351browse

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 您的浏览器不支持canvas

The effect is as follows:
Detailed explanation of HTML5 canvas (5)
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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn