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

Detailed explanation of HTML5 canvas (5)

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

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas绘图</title>
    <script>
    window.onload = function()
    {
        drawCanvas1();
        drawCanvas2();
        drawCanvas3();
    }
    //context.drawImage(img,x,y);
    function drawCanvas1()
    {
        var canvas = document.getElementById("myCanvas1");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y)画原图", 250, 350);
    }

    //context.drawImage(img,x,y,width,height);
    function drawCanvas2()
    {
        var canvas = document.getElementById("myCanvas2");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0, 500, 300);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y,width,height)指定宽和高进行拉伸和缩放", 250, 350);
    }

    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    function drawCanvas3()
    {
        var canvas = document.getElementById("myCanvas3");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        { 
            context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)", 250, 350);
        context.fillText("裁切图片的一部分绘制在画布上，并可进行缩放", 250, 370);
    }

    </script>
</head>
<body>
    <canvas id="myCanvas1" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas2" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas3" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <br />
</body>
</html>

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

Previous article：Detailed explanation of HTML5 canvas (4)Next article：Detailed explanation of HTML5 canvas (4)

See more

Detailed explanation of HTML5 canvas (5)

Related articles