Web-Frontend
H5-Tutorial
Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand
Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand
Das
canvas-Element verwendet JavaScript, um Bilder auf der Webseite zu zeichnen. Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können. Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern. Also, Wie zeichne ich ein Rechteck mit Leinwand? Der folgende Artikel stellt Ihnen die Implementierungsmethode zum Zeichnen eines Rechtecks auf der Leinwand vor. Sie können einen Blick darauf werfen, wenn Sie sie benötigen.
Was wir wissen müssen, ist, dass die Methode, die sich auf Rechtecke in der Leinwand bezieht, rect() ist. Verwenden Sie die Methode Stroke() oder Fill(), um tatsächlich ein Rechteck auf der Leinwand zu zeichnen.
Die rect()-Methode kann 4 Parameter empfangen: die x-Koordinate des Rechtecks, die y-Koordinate des Rechtecks, die Breite des Rechtecks und die Höhe des Rechtecks. Die Einheiten dieser Parameter sind Pixel.
Jetzt verwenden wir die Methoden Strokrect() und Fillrect(), um ein Rechteck zu zeichnen.
Schauen wir uns zunächst ein Beispiel eines gefüllten Rechtecks an, das mit der Methode fillrect() im Canvas gezeichnet wurde.
Das von der fillRect()-Methode auf der Leinwand gezeichnete Rechteck wird mit der angegebenen Farbe gefüllt. Die Farbe der Füllung wird über die Eigenschaft fillStyle angegeben.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>Der Effekt des Zeichnens eines gefüllten Rechtecks auf der Leinwand ist wie folgt:
Dann schauen wir uns ein Beispiel eines ungefüllten Rechtecks an, das mit der Strokerect()-Methode in Canvas gezeichnet wurde. Das mit der
StrokeRect()-Methode auf der Leinwand gezeichnete Rechteck wird mit der angegebenen Farbe gestrichelt. Die Strichfarbe wird über die Eigenschaft „StrokeStyle“ angegeben.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>Der Effekt des Zeichnens eines ungefüllten Rechtecks auf Leinwand ist wie folgt:
Schließlich endet dieser Artikel hier, mehr über Leinwand Weitere relevante Kenntnisse finden Sie im HTML5-Entwicklungshandbuch.
Das obige ist der detaillierte Inhalt vonWie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand. 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
Wie groß ist die Fläche eines Kreises innerhalb eines Rechtecks, das in einen Halbkreis eingeschrieben ist?
Sep 13, 2023 am 08:45 AM
Ein in ein Rechteck eingeschriebener Kreis tangiert die längere Seite des Rechtecks, d. h. seine Länge tangiert den Kreis. Ein in einen Halbkreis eingeschriebenes Rechteck berührt zwei Punkte auf dem Bogen des Halbkreises. Die Breite des Rechtecks entspricht dem Durchmesser des Kreises. Wenn R der Radius des Halbkreises ist. Die Länge des Rechtecks = √2R/2 Die Breite des Rechtecks = R/√2 Der Radius des eingeschriebenen Kreises beträgt r = b/2 = R/2√2 Mit dieser Formel können wir das in den Halbkreis eingeschriebene Rechteck berechnen Die Fläche eines Kreises, Fläche = (π*r2)=π*R/8 Beispieldemonstration #include<stdio.h>intmain(){&
So führen Sie eine Grafik zusammen, nachdem CAD-Rechtecke verstreut sind
Feb 28, 2024 pm 12:10 PM
Bei der Verwendung von CAD-Software kommt es häufig vor, dass wir „verstreute“ rechteckige Objekte wieder zu einer einzigen Grafik zusammenfügen müssen. Dieser Bedarf entsteht in vielen Bereichen, beispielsweise in der Raumplanung, im mechanischen Design und in Architekturzeichnungen. Um dieser Nachfrage gerecht zu werden, müssen wir einige Schlüsselfunktionen der CAD-Software verstehen und beherrschen. Als Nächstes stellt Ihnen der Herausgeber dieser Website ausführlich vor, wie Sie diese Aufgabe in der CAD-Umgebung ausführen. Benutzer, die Zweifel haben, können diesem Artikel folgen, um mehr zu erfahren. Methode zum Zusammenführen von CAD-Rechtecken zu einer Grafik nach dem Aufteilen: 1. Öffnen Sie die CAD2023-Software, erstellen Sie ein Rechteck und geben Sie dann den X-Befehl und ein Leerzeichen ein. Wie unten gezeigt: 2. Wählen Sie das rechteckige Objekt aus und platzieren Sie es. Sie können die Objekte aufteilen. 3. Wählen Sie alle offenen Leitungen aus
Was sind die Canvas-Pfeil-Plug-ins?
Aug 21, 2023 pm 02:14 PM
Zu den Canvas-Pfeil-Plugins gehören: 1. Fabric.js, das über eine einfache und benutzerfreundliche API verfügt und benutzerdefinierte Pfeileffekte erstellen kann. 2. Konva.js, das die Funktion zum Zeichnen von Pfeilen bietet und verschiedene Pfeile erstellen kann 3. Pixi.js, das umfangreiche Grafikverarbeitungsfunktionen bietet und verschiedene Pfeileffekte erzielen kann; 4. Two.js, das auf einfache Weise Pfeilstile und Animationen erstellen und steuern kann; 6. Grobe .js, Sie können handgezeichnete Pfeile usw. erstellen.
Was sind die Details der Leinwanduhr?
Aug 21, 2023 pm 05:07 PM
Zu den Details der Leinwanduhr gehören das Aussehen der Uhr, Teilstriche, Digitaluhr, Stunden-, Minuten- und Sekundenzeiger, Mittelpunkt, Animationseffekte, andere Stile usw. Ausführliche Einführung: 1. Erscheinungsbild der Uhr: Sie können mit Canvas ein kreisförmiges Zifferblatt als Erscheinungsbild der Uhr zeichnen und die Größe, Farbe, den Rand und andere Stile des Zifferblatts festlegen. 2. Skalenlinien: Zeichnen Sie Skalenlinien ein 3. Digitaluhr: Sie können eine Digitaluhr auf das Zifferblatt zeichnen, um die aktuelle Stunde und Minute anzuzeigen.
Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail
Jan 17, 2024 am 11:03 AM
Entdecken Sie das Canvas-Framework: Um die häufig verwendeten Canvas-Frameworks zu verstehen, sind spezifische Codebeispiele erforderlich. Einführung: Canvas ist eine in HTML5 bereitgestellte Zeichen-API, mit der wir umfangreiche Grafik- und Animationseffekte erzielen können. Um die Effizienz und den Komfort des Zeichnens zu verbessern, haben viele Entwickler verschiedene Canvas-Frameworks entwickelt. In diesem Artikel werden einige häufig verwendete Canvas-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern ein tieferes Verständnis für die Verwendung dieser Frameworks zu vermitteln. 1. EaselJS-Framework Ea
Welche Versionen von html2canvas gibt es?
Aug 22, 2023 pm 05:58 PM
Zu den Versionen von html2canvas gehören html2canvas v0.x, html2canvas v1.x usw. Detaillierte Einführung: 1. html2canvas v0.x, eine frühe Version von html2canvas. Die neueste stabile Version ist v0.5.0-alpha1. Es handelt sich um eine ausgereifte Version, die in vielen Projekten weit verbreitet und verifiziert wurde. 2. html2canvas v1.x, dies ist eine neue Version von html2canvas.
uniapp implementiert die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten
Oct 18, 2023 am 10:42 AM
Für die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten in Uniapp sind bestimmte Codebeispiele erforderlich. 1. Einführung Mit der Beliebtheit mobiler Geräte müssen immer mehr Anwendungen verschiedene Diagramme und Animationseffekte auf dem mobilen Endgerät anzeigen. Als plattformübergreifendes Entwicklungsframework auf Basis von Vue.js bietet uniapp die Möglichkeit, Canvas zum Zeichnen von Diagrammen und Animationseffekten zu verwenden. In diesem Artikel wird vorgestellt, wie Uniapp Canvas verwendet, um Diagramm- und Animationseffekte zu erzielen, und es werden spezifische Codebeispiele gegeben. 2. Leinwand
Welche Eigenschaften hat Tkinter Canvas?
Aug 21, 2023 pm 05:46 PM
Zu den Tkinter-Canvas-Attributen gehören BG, BD, Relief, Breite, Höhe, Cursor, Highlightbackground, Highlightcolor, Highlightthickness, Insertbackground, Insertwidth, Selectbackground, Selectforeground, XScrollcommand-Attribute usw. Ausführliche Einführung
