Detaillierte Erläuterung des HTML5-Canvas (5)
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 : 
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1207
24
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
