HTML5 4__Canvas API: Kurven und Transformationen zeichnen
Einer der Ausgangspunkte für die HTML5-Entwicklung ist Canvas, mit dem Grafiken, Diagramme, Bilder und Animationen dynamisch generiert und angezeigt werden können.
Vor der Einführung von Canvas mussten Entwickler nur die Zeichen-API verwenden Im Browser können Sie die Flash- und SVG-Plugins (Scalable Vector Graphics) oder VML (Vector Markup Language) verwenden, die nur vom IE unterstützt werden, sowie einige JS-Kenntnisse.
Canvas ist im Wesentlichen eine Bitmap-Leinwand. Die darauf gezeichneten Grafiken sind nicht skalierbar und können nicht wie SVG-Bilder skaliert werden. Außerdem gehören mit Canvas gezeichnete Objekte nicht zur Seite.DOM-Struktur oder ein beliebiger Namespace, der als Fehler gilt, SVG-Bilder können bei verschiedenen Auflösungen reibungslos skaliert werden und unterstützen die Klickerkennung. Obwohl Canvas offensichtliche Mängel aufweist, hat die Canvas-API zwei Vorteile:
1 Es ist nicht erforderlich, jedes Grundelement im gezeichneten Bild als Objekt zu speichern, und die Ausführungsleistung ist sehr gut.
2. Es ist relativ einfach, die Canvas-API basierend auf den vorhandenen hervorragenden zweidimensionalen Zeichen-APIs in anderen Programmiersprachen zu implementieren.
1. Stellen Sie zunächst die Leinwand vor, um Kurven zu zeichnenSehen Sie sich den Code an
Laufeffekt im Chrome
Browser
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>绘制曲线</title>
<script language="javascript">
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(-10, 350);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);
context.quadraticCurveTo(170, -50, 260, -190);
// 第二条曲线向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);
//使用棕色的粗线条来绘制路径
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();
//恢复之前的canvas 状态
context.restore();
}
window.addEventListener("load", drawTrails, true);
</script>
</head>
<body>
<canvas height="400" width="400" id="trails" style="border: 1px solid;"/>
</body>
</html>2. Transformation
Eine Möglichkeit, Bilder auf Leinwand zu zeichnen, ist die Verwendung von Transformation. Tatsächlich ist Transformation die beste Möglichkeit, komplexe Leinwandoperationen umzusetzen.
Sie können Transformation so verstehen: Stellen Sie sich das so vor eine vom Entwickler ausgegebene Funktion Eine modifizierte positive Ebene zwischen dem Befehl und dem Ergebnis der Leinwandanzeige,
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>变换对角线</title>
<canvas id="diagonal" style="border: 1px solid;" width="200" height="200"> </canvas>
<script>
function drawDiagonal() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
// 保存当前绘图状态
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();
// 恢复原有的绘图状态
context.restore();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</html>
Das Obige ist die HTML5 4__Canvas-API: Kurvenzeichnungs- und Transformationsinhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). 
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1378
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.
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
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-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.
