Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-15 16:19:09
Original
1279 Leute haben es durchsucht

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);
Nach dem Login kopieren



Grammatik 2

context.drawImage(img,dx,dy,dw,dw);
Nach dem Login kopieren
  1. Grammatik 3

JavaScript CodeInhalt in die Zwischenablage kopieren

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
Nach dem Login kopieren
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 , 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

sxOptional. Die x-Koordinatenposition, an der mit dem Scheren begonnen werden soll.
syOptional. 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.
xPlatzieren Sie die x-Koordinatenposition des Bildes auf der Leinwand.
yPlatzieren Sie die Y-Koordinatenposition des Bildes auf der Leinwand.
BreiteOptional. Die Breite des zu verwendenden Bildes. (Bild strecken oder verkleinern)
HöheDie 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>
Nach dem Login kopieren



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>
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage