Heim > Artikel > Web-Frontend > Teilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild)

Teilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild)

黄舟Original: 2017-03-15 16:19:091271Durchsuche

In diesem Artikel werden hauptsächlich die Verwendungsbeispiele der Methode drawImage() in HTML5 Canvas API vorgestellt. Die Methode drawImage() wird hauptsächlich zum Skalieren von Bildern verwendet. Oder zuschneiden, der Artikel gibt die Verwendung seiner Koordinaten und zugehörigen Parameter an, Freunde in Not können darauf verweisen

drawImage() ist eine sehr wichtige Methode, sie kann Bilder, Leinwände, Videos und skalieren oder zuschneiden.

hat drei Ausdrucksformen:

Grammatik 1

context.drawImage(img,dx,dy);

Grammatik 2

context.drawImage(img,dx,dy,dw,dw);

Grammatik 3

JavaScript CodeInhalt in die Zwischenablage kopieren

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

Schauen wir uns die Koordinatenskizze an:

Teilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild)

PS: Definieren Sie nicht die Breite und Höhe von 6344bb616d0a4e89803164795ea8043b, sonst wird das darin gezeichnete

Bild automatisch vergrößert oder verkleinert. Die Version mit drei Parametern ist ein Standardformular und kann zum Laden von Bildern, Leinwänden oder Videos verwendet werden. Die Version mit fünf Parametern kann nicht nur Bilder laden, sondern das Bild auch auf eine bestimmte Breite und Höhe skalieren Zusätzlich zur Skalierung kann die Version auch zugeschnitten werden. Die Bedeutung der einzelnen Parameter finden Sie in der folgenden Tabelle.

Parameter

Beschreibung

img

Optional. Die x-Koordinatenposition, an der mit dem Scheren begonnen werden soll.

Optional. Die Y-Koordinatenposition, an der mit dem Scheren begonnen werden soll.

sBreite

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

Optional. Die Breite des zugeschnittenen Bildes.

sHöhe

Optional. Die Höhe des ausgeschnittenen Bildes.

Platzieren Sie die x-Koordinatenposition des Bildes auf der Leinwand.

Platzieren Sie die Y-Koordinatenposition des Bildes auf der Leinwand.

Breite

Optional. Die Breite des zu verwendenden Bildes. (Bild strecken oder verkleinern)

Höhe

Die Höhe des zu verwendenden Bildes. (Bild strecken oder verkleinern)

Als nächstes versuchen wir, ein Bild zu laden.

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
</script>   
</body>   
</html>

Laufergebnis: Teilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild)

Erstellen Sie einen Fotorahmen: Hier kombinieren wir clip

() mit drawImage() und der kubischen Bezier-Kurve bezierCurveTo(), um dem oben genannten Fall ein herzförmiges Fotorahmen hinzuzufügen ~

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制心形相框</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        context.beginPath();   
        context.moveTo(400,260);   
        context.bezierCurveTo(450,220,450,300,400,315);   
        context.bezierCurveTo(350,300,350,220,400,260);   
        context.clip();   
        context.closePath();   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
</script>   
</body>   
</html>

Laufergebnis: Teilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild)

Ist es nicht wunderschön? Okay, nachdem wir nun über die wichtigsten Maskierungs- und Bildzuschneidefunktionen gesprochen haben, ist drawImage() tatsächlich auch eine entscheidende Methode in java.awt. Manche Leute sagen, dass man beim Erstellen von Java-Spielschnittstellen die Welt mit einem Zug erobern kann, solange man weiß, wie man drawImage () verwendet. ~ Das Gleiche gilt für Canvas. Bei den von Künstlern bereitgestellten Materialien handelt es sich im Wesentlichen um Bilder. Derzeit ist drawImage () für die Verarbeitung von Bildern sehr wichtig. Selbst Grundkenntnisse sind die wichtigste Möglichkeit, Bilder zu verarbeiten.

Das obige ist der detaillierte Inhalt vonTeilen von Codebeispielen für die Verwendung der Methode drawImage() in der HTML5-Canvas-API (Bild). 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：Codebeispiel zum Zuschneiden eines Flächenbilds mit der Methode „clip()“ in der HTML5-Canvas-APINächster Artikel：Codebeispiel zum Zuschneiden eines Flächenbilds mit der Methode „clip()“ in der HTML5-Canvas-API

In Verbindung stehende Artikel

Mehr sehen