Web-Frontend
H5-Tutorial
So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit HTML5 Canvas_html5 Tutorial-Tipps
So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit HTML5 Canvas_html5 Tutorial-Tipps
Die wichtigsten Eigenschaften und Methoden des CanvasRenderingContext2D-Objekts, die zum Zeichnen von Polygonen mit HTML5 Canvas erforderlich sind (die mit „()“ sind Methoden), sind wie folgt:
| 属性或方法 | 基本描述 |
|---|---|
| strokeStyle | 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 |
| globalAlpha | 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。 |
| lineWidth | 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。 |
| lineCap | 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。 |
| beginPath() | 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。 |
| moveTo(int x, int y) | 定义一个新的绘制路径的起点坐标 |
| lineTo(int x, int y) | 定义一个绘制路径的中间点坐标 |
| stroke(int x, int y) | 沿着绘制路径的坐标点顺序绘制直线 |
| closePath() | 如果当前的绘制路径是打开的，则闭合该绘制路径。 |
Zeichne ein Dreieck
- "UTF-8">
-
Der entsprechende Anzeigeeffekt ist wie folgt:
Rechtecke zeichnen
Der Grund, warum Canvas-Zeichenrechtecke separat erwähnt werden, liegt darin, dass das Canvas-Pinselwerkzeug-CanvasRenderingContext2D-Objekt eine spezielle Methode zum Zeichnen von Rechtecken bereitstellt.XML/HTML-CodeInhalt in die Zwischenablage kopierenDer entsprechende rechteckige Effekt wird wie folgt angezeigt:- >
- <html>
- <Kopf>
- <meta charset="UTF- 8">
- <Titel>HTML5-Leinwand-Zeichnungsrechteck – Erste Schritte – Beispiel< / Titel>
- Kopf>
- <Körper>
- <canvas id="myCanvas" Breite="400px" Höhe="300px" style="border: 1px solid red;">
- Ihr Browser unterstützt das Canvas-Tag nicht.
- Leinwand>
- <Skript Typ="text/ Javascript">
- //Holen Sie sich das Canvas-Objekt (Canvas)
- var canvas = document.getElementById("myCanvas");
- //Erkennen Sie einfach, ob der aktuelle Browser das Canvas-Objekt unterstützt, um Syntaxfehler in einigen Browsern zu vermeiden, die HTML5 nicht unterstützen
- if(canvas.getContext){
- //Holen Sie sich das entsprechende CanvasRenderingContext2D-Objekt (Pinsel)
- var ctx = canvas.getContext("2d");
- //Neuen Zeichenpfad starten
- ctx.beginPath();
- //Setzen Sie die Linienfarbe auf Blau
- ctx.StrokeStyle = "blue"; //Zeichnen Sie ein Rechteck mit einer Breite von 80 Pixel und einer Höhe von 50 Pixel, indem Sie den Koordinatenpunkt (10,10) auf der Leinwand als Ausgangspunkt für die Zeichnung verwenden
- ctx.rect(10, 10, 80, 50);
- //Zeichne eine gerade Linie entsprechend dem angegebenen Pfad
- ctx.stroke();
- //Zeichenpfad schließen
- ctx.closePath();
- }
- Skript>
- Körper>
- html>
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
1359
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.
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-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-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-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.
