Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des HTML5-Canvas (5)

Detaillierte Erläuterung des HTML5-Canvas (5)

黄舟Original: 2017-03-17 15:50:311421Durchsuche

drawImage bietet insgesamt drei Methoden:

1. Positionieren Sie das Bild auf der Leinwand.

context.drawImage(img,x,y);

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);

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);

参数	描述
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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des HTML5-Canvas (4)Nächster Artikel：Detaillierte Erläuterung des HTML5-Canvas (4)

In Verbindung stehende Artikel

Mehr sehen