Heim Web-Frontend H5-Tutorial HTML5-Canvas – Zeichnen Sie einfache Rechtecke und Dreiecke, Beispielcode_html5-Tutorial-Fähigkeiten

HTML5-Canvas – Zeichnen Sie einfache Rechtecke und Dreiecke, Beispielcode_html5-Tutorial-Fähigkeiten

May 16, 2016 pm 03:49 PM
canvas 三角形 矩形

Platzieren Sie zunächst ein Canvas-Element in der HTML-Seite, wobei das Canvas-Element drei Attribute haben sollte: ID, Breite und Höhe.

Code kopieren
Der Code lautet wie folgt:



Holen Sie sich das Canvas-Objekt und den Kontext var cxt=document.getElementById('demo').getContext( „2d“); Der Parameter 2d wird ermittelt.

Beginnen Sie mit dem Zeichnen. Es gibt zwei Formen, eine ist Füllung und die andere ist Strich.

Javascript-Code:

Code kopieren
Der Code lautet wie folgt:




Rendering:

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie groß ist die Fläche eines Kreises innerhalb eines Rechtecks, das in einen Halbkreis eingeschrieben ist? 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(){&

Java-Programm zur Berechnung der Fläche eines Dreiecks mithilfe von Determinanten Java-Programm zur Berechnung der Fläche eines Dreiecks mithilfe von Determinanten Aug 31, 2023 am 10:17 AM

Einführung Das Java-Programm zur Berechnung der Fläche eines Dreiecks mithilfe der Determinante ist ein prägnantes und effizientes Programm, das die Fläche eines Dreiecks anhand der Koordinaten von drei Eckpunkten berechnen kann. Dieses Programm ist für jeden nützlich, der Geometrie erlernt oder damit arbeitet, da es zeigt, wie man grundlegende arithmetische und algebraische Berechnungen in Java verwendet und wie man die Scanner-Klasse zum Lesen von Benutzereingaben verwendet. Das Programm fordert den Benutzer zur Eingabe der Koordinaten von drei Punkten des Dreiecks auf, die dann eingelesen und zur Berechnung der Determinante der Koordinatenmatrix verwendet werden. Verwenden Sie den Absolutwert der Determinante, um sicherzustellen, dass die Fläche immer positiv ist. Verwenden Sie dann eine Formel, um die Fläche des Dreiecks zu berechnen und sie dem Benutzer anzuzeigen. Das Programm kann leicht modifiziert werden, um Eingaben in verschiedenen Formaten zu akzeptieren oder zusätzliche Berechnungen durchzuführen, was es zu einem vielseitigen Werkzeug für geometrische Berechnungen macht. Reihen von Determinanten

So führen Sie eine Grafik zusammen, nachdem CAD-Rechtecke verstreut sind 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? 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? 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.

Welche Versionen von html2canvas gibt es? 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.

Schreiben Sie ein Java-Programm, um die Fläche und den Umfang eines Rechtecks ​​mithilfe des Klassenkonzepts zu berechnen Schreiben Sie ein Java-Programm, um die Fläche und den Umfang eines Rechtecks ​​mithilfe des Klassenkonzepts zu berechnen Sep 03, 2023 am 11:37 AM

Die Java-Sprache ist heute eine der am häufigsten verwendeten objektorientierten Programmiersprachen der Welt. Das Konzept der Klassen ist eines der wichtigsten Merkmale objektorientierter Sprachen. Eine Klasse ist wie eine Blaupause für ein Objekt. Wenn wir zum Beispiel ein Haus bauen wollen, erstellen wir zunächst einen Bauplan des Hauses, also einen Plan, der zeigt, wie wir das Haus bauen werden. Nach diesem Plan können wir viele Häuser bauen. Ebenso können wir mithilfe von Klassen viele Objekte erstellen. Klassen sind Blaupausen für die Erstellung vieler Objekte, wobei Objekte reale Einheiten wie Autos, Fahrräder, Stifte usw. sind. Eine Klasse hat die Eigenschaften aller Objekte und die Objekte haben die Werte dieser Eigenschaften. In diesem Artikel schreiben wir ein Java-Programm, um den Umfang und die Flächen eines Rechtecks ​​mithilfe des Klassenkonzepts zu ermitteln

Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail 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

See all articles