Detaillierte Erläuterung des HTML5-Canvas (5)-H5-Tutorial-php.cn

Detaillierte Erläuterung des HTML5-Canvas (5)

黄舟

Freigeben： 2017-03-17 15:50:31

Original

1468 Leute haben es durchsucht

drawImage bietet insgesamt drei Methoden:

1. Positionieren Sie das Bild auf der Leinwand.

context.drawImage(img,x,y);

Nach dem Login kopieren

2. Positionieren Sie das Bild auf der Leinwand und geben Sie die Breite und Höhe des Bildes an.

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

Nach dem Login kopieren

3. Schneiden Sie das Bild zu und positionieren Sie den zugeschnittenen Teil auf der Leinwand.

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

Nach dem Login kopieren

参数	描述
img	规定要使用的图像、画布或视频。
sx	开始剪切图像的 x 坐标位置。
sy	开始剪切图像的 y 坐标位置。
swidth	被剪切图像的宽度。
sheight	被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	要绘制的图像的宽度。（伸展或缩小图像）
height	要绘制的图像的高度。（伸展或缩小图像）

Der folgende Code enthält die oben genannten drei Methoden zum Zeichnen von Bildern auf Leinwand:

<!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>

Nach dem Login kopieren

Wirkung Wie folgt :
Detaillierte Erläuterung des HTML5-Canvas (5)
Das erste Bild: context.drawImage(img, 0, 0) beginnt mit dem Zeichnen von der Leinwand (0,0) und zeichnet die Originalgröße des Bildes.
Das zweite Bild: context.drawImage(img, 0, 0, 500, 300) bedeutet, dass mit dem Zeichnen auf der Leinwand (0,0) begonnen wird, und gibt an, dass die Breite und Höhe des gezeichneten Bildes 500 und 300 beträgt entsprechend, sodass das Originalbild gestreckt oder verkleinert wird.
Das dritte Bild: context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200); bedeutet das Zuschneiden des Teils mit einer Breite und Höhe von 200 bzw. 200 von der (200,100)-Position des Platzieren Sie es an der Position (0,0) der Leinwand und geben Sie die Breite und Höhe des gezeichneten Bildes als 200 bzw. 200 an.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des HTML5-Canvas (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!