So verwenden Sie Canvas
So verwenden Sie Canvas: Verwenden Sie zunächst das Document Object Model (DOM) für die Zielpositionierung. Verwenden Sie dann das ID-Attribut, um den passenden Zielort zu identifizieren.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
Canvas ist ein HTML5-Element, das das einfache und leistungsstarke Zeichnen von Grafiken mithilfe der Programmiersprache JavaScript ermöglicht, und Entwickler verwenden es gerne zum Erstellen umfangreicher Webanwendungen. Benutzer können diese Anwendungen verwenden, ohne proprietäre Browser-Plug-Ins wie den Flash Player von Adobe zu verwenden.
Sehen wir uns die Verwendung des Canvas-Elements genauer an.
Das Canvas-Element kann nur als Container für Grafiken verwendet werden. Daher sollten wir JavaScript zum Rendern von Grafiken verwenden.
Wenn wir Grafiken auf Canvas zeichnen, müssen wir zuerst das Document Object Model verwenden (DOM) zur Zielpositionierung. Außerdem hilft Ihnen die Verwendung des ID-Attributs dabei, passende Zielorte zu identifizieren.
Sehen wir uns den Code eines canvas-Elements an
<canvas width="320" height="160" id="canvasExample"></canvas>
Das Canvas-Element lässt zwei spezifische Attribute zu: Breite und Höhe.
Wenn Sie für diese beiden Eigenschaften keinen Wert angeben, verwendet der Canvas die Standardwerte von 300 Pixel für die Breite und 150 Pixel für die Höhe.
Das ID-Attribut wird verwendet, um das Canvas-Element im JavaScript-Code zu identifizieren.
Anfänglich ist das Element
Das Canvas-Element verfügt über eine integrierte DOM-Methode namens getContext. Es handelt sich um eine JavaScript-Funktion, die für den Zugriff auf den Rendering-Kontext und seine Zeichenmethoden verwendet wird.
Diese Funktion akzeptiert ein einzelnes Argument, normalerweise einen 2D-Grafikkontext (definiert als „2d“)
Um beispielsweise eine rechteckige Form auf einer Leinwand zu erstellen , muss die Folgende Eigenschaften sind erforderlich und Funktion:
fillStyle = "color" – Farbe zum Rechteck hinzufügen.
fillRect(x,y,width,height) – Zeichnet ein gefülltes Rechteck
StrokeRect(x,y,width,height) – Gibt dem Rechteck einen Umriss
clearRect (x,y,width,height) – Der angegebene rechteckige Abschnitt wird gelöscht und vollständig transparent.
Um Koordinaten zu definieren, wird ein Canvas-Gitter oder ein Koordinatensystem verwendet. Die Originalgröße befindet sich in der oberen linken Ecke des Canvas-Bereichs mit den Koordinaten (0,0).
Daher verschiebt sich die X-Koordinate nach rechts und die Y-Koordinate nach unten. Der Abstand wird in Pixel angegeben.
x gibt die horizontale Position von links oben nach rechts oben an.
y gibt die vertikale Position von links oben nach unten an.
width gibt das Rechteck an. Die Breite
height gibt die Höhe des Rechtecks an
Der spezifische Code lautet wie folgt
JavaScript HTML5 Canvas Example <canvas width="320" height="160" id="canvasExample"></canvas> <script> function canvasExample(){ var canvas = document.getElementById("canvasExample"); if(canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle = "blue"; context.fillRect(50,50,150,250); context.clearRect(75,75,100,50); context.strokeRect(90,90,75,20); }else{ alert("Please a Canvas-Supporting Web Browser"); } } </script>
Der Anzeigeeffekt im Browser ist wie folgt
Was im obigen Code in JavaScript implementiert ist, ist:
Identifizieren Sie zuerst das Canvas-Element über das DOM
Das Kontext ist definiert
Die Funktion fillRect() generiert ein Rechteck mit 150 x 250 Pixeln
Dann entfernt die Funktion clearRect() ein Rechteck mit 100 x 50 Pixeln aus der Mitte
Schließlich , löscht die Funktion „StrokeRect()“ den Bereich. Konstruieren Sie ein 75 x 20 Pixel großes Rechteck
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
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)
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 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.
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
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.
Entdecken Sie die wichtige Rolle und Anwendung von Canvas in der Spieleentwicklung
Jan 17, 2024 am 11:00 AM
Verstehen Sie die Leistungsfähigkeit und Anwendung von Canvas in der Spieleentwicklung. Überblick: Mit der rasanten Entwicklung der Internettechnologie werden Webspiele bei Spielern immer beliebter. Als wichtiger Bestandteil der Webspielentwicklung hat sich die Canvas-Technologie nach und nach in der Spieleentwicklung durchgesetzt und ihre leistungsstarke Leistungsfähigkeit und Anwendung unter Beweis gestellt. In diesem Artikel wird das Potenzial von Canvas in der Spieleentwicklung vorgestellt und seine Anwendung anhand spezifischer Codebeispiele demonstriert. 1. Einführung in die Canvas-Technologie Canvas ist ein neues Element in HTML5, das uns die Verwendung ermöglicht
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
Wo sind die Koordinaten der Canvas-Maus?
Aug 22, 2023 pm 03:08 PM
So erhalten Sie Mauskoordinaten für die Leinwand: 1. Erstellen Sie eine JavaScript-Beispieldatei. 2. Rufen Sie einen Verweis auf das Canvas-Element ab und fügen Sie einen Listener für Mausbewegungsereignisse hinzu. 3. Wenn sich die Maus auf der Leinwand bewegt, wird die Funktion getMousePos ausgelöst ; 4. Verwenden Sie die Methode „getBoundingClientRect()“, um die Positions- und Größeninformationen des Canvas-Elements sowie die Mauskoordinaten über event.clientX und event.clientY abzurufen.
