Wie drehe ich Bilder mit HTML5-Canvas? (Beispieldemonstration)
Vor kurzem wollte ich plötzlich die Funktion des Drehens von Bildern in js untersuchen. Ich werde nicht zuerst auf die vorherigen Implementierungsmethoden eingehen. HTML5 ist jetzt sehr gut. Lassen Sie uns hauptsächlich die Bilddrehung in HTML5 verstehen.
Beispieldemonstration:
http://www.imqing.com/demo/rotateImg.html
Prinzip: Leinwandobjekt zum Drehen verwenden.
Implementierungsmethode: Erstellen Sie zuerst ein Canvas-Element und zeichnen Sie dann das img-Element in die Canvas. Tatsächlich ist dies jedoch die Standardsituation, wenn das Bild nicht gedreht wird. Wenn das Bild um 90 Grad gedreht werden muss, müssen Sie die Leinwand vor dem Zeichnen um 90 Grad drehen.
Die Beschreibung lautet wie folgt:
Die Koordinaten des Bildes werden von der oberen linken Ecke aus berechnet und von der positiven y-Richtung nach unten Auf der Leinwand befindet sich diese Koordinate tatsächlich in „Rotate“, sodass die endgültige Zeichnung anders ist.
Zu dieser Zeit habe ich auch Picpick verwendet, um die Koordinaten des Startpunkts nach der Drehung um einen bestimmten Winkel zu messen, und dann wurde mir klar, dass die ursprüngliche Drehung so war.
Code:
<body>
<button onclick="rotateImg('testImg', 'left')">向左旋转</button>
<button onclick="rotateImg('testImg', 'right')">向右旋转</button><br/>
<img src="./test.jpg" id="testImg"/>
<script>
function rotateImg(pid, direction) {
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
var img = document.getElementById(pid);
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
var step = img.getAttribute('step');
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
img.setAttribute('step', step);
var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
}
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
</script>
</body>Erklärung: Es besteht keine Notwendigkeit, die Breite und Höhe von Canvas.width und height zu erklären, das sollte so sein. Sie sollten nicht rotieren müssen, oder? Der Schlüssel ist drawImage(img, x, y);drawImage(img, x, y);
其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是x = 0, y= img.height
step=1 wird das Bild um 90 Grad nach rechts gedreht, das heißt, das Koordinatensystem wird um 90 Grad gedreht, dann sollte die Startposition x = 0, y= img sein. Höhe🎜Das obige ist der detaillierte Inhalt vonWie drehe ich Bilder mit HTML5-Canvas? (Beispieldemonstration). 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
1389
52
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.
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.
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-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.
