Seit ich angefangen habe zu arbeiten, habe ich über Vue, React, reguläre Regeln, Algorithmen, kleine Programme usw. geschrieben, aber ich habe nie über Canvas geschrieben, weil ich wirklich nicht weiß, wie!
Im Jahr 2018 habe ich mir ein kleines Ziel gesetzt: Canvas zu lernen und den Effekt zu erzielen, mit Canvas einige Animationen zu erzielen, die mit CSS3 nicht einfach zu erreichen sind.
Dieser Artikel ist der erste Vorteil, den viele Leute beim Lernen von Canvas machen. Natürlich habe ich auch eine implementiert, aber anstatt darüber zu sprechen, werde ich über eine interessantere und einfachere Version sprechen eins.
Halten Sie die Maus gedrückt, um die Flugbahn zu zeichnen brauchenAuf einer Leinwand befindet sich im Ausgangszustand nichts auf der Leinwand. Jetzt möchte ich der Leinwand einige Mausereignisse hinzufügen und mit der Maus auf die Leinwand schreiben. Der konkrete Effekt besteht darin, die Maus an einen beliebigen Punkt auf der Leinwand zu bewegen, dann die Maus gedrückt zu halten, die Mausposition zu verschieben und schon können Sie mit dem Schreiben beginnen!
PrinzipLassen Sie uns die Idee kurz analysieren. Zuerst benötigen wir eine Leinwand, berechnen dann die Position der Maus auf der Leinwand, binden das Ereignis onmousedown und onmousemove an die Maus und zeichnen den Pfad, während die Maus losgelassen wird Die Zeichnung endet.
Obwohl diese Idee sehr einfach ist, gibt es einige Teile, für deren Umsetzung einige Tricks erforderlich sind.
1. Es ist eine HTML-Datei erforderlich, die Canvas-Elemente enthält.
Dies ist eine Leinwand mit einer Breite von 800 und einer Höhe von 400. Warum hast du nicht px geschrieben? Oh, ich verstehe es noch nicht, es wird im Canvas-Dokument empfohlen.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-kompatibler Inhalt=ie=edge> <title>canvas learning< /title> <meta name=description content=> <meta name=viewport content=width=device-width, initial-scale=1> <link rel=manifest href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 height =400></canvas> <script src=js/main.js></script> </body></html>
2. Stellen Sie fest, ob die aktuelle Umgebung Canvas unterstützt.
In main.js schreiben wir eine selbstausführende Funktion. Das Folgende ist der Codeausschnitt zur Beurteilung der Kompatibilität. Der Hauptteil des Codes wird den Kern der Implementierungsanforderungen bilden.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Inkompatibel mit Canvas return false } else { //Code body}})()3. Holen Sie sich das 2D-Objekt.
let context = theCanvas.getContext('2d')4. Ermitteln Sie die Koordinaten der aktuellen Maus relativ zur Leinwand.
Warum müssen wir diese Koordinate erhalten? Da die Maus standardmäßig die relativen Koordinaten des aktuellen Fensters ermittelt und sich die Leinwand an einer beliebigen Stelle auf der Seite befinden kann, sind Berechnungen erforderlich, um die tatsächlichen Mauskoordinaten zu ermitteln.
Das Ermitteln der realen Koordinaten der Maus relativ zur Leinwand wird in eine Funktion gekapselt. Wenn Sie sich abstrakt fühlen, können Sie ein Bild auf ein Notizpapier zeichnen, um zu verstehen, warum dieser Vorgang erforderlich ist.
Normalerweise wäre dies x - rect.left und y - rect.top. Aber warum ist es eigentlich x - rect.left * (canvas.width/rect.width)?
Canvas.width/rect.width bedeutet, das Skalierungsverhalten in Canvas zu bestimmen und das Skalierungsmultiplikator zu ermitteln.
const windowToCanvas = (canvas, x, y) => { //Einige Eigenschaften des Canvas-Element-Abstandsfensters abrufen, erklärt auf MDN let rect = canvas.getBoundingClientRect() //Die x- und y-Parameter werden jeweils von der Maus übergeben Geben Sie die Fensterkoordinaten für den Abstand ein und subtrahieren Sie dann den Abstand zwischen der Leinwand und dem linken und oberen Rand des Fensters. return { x: x - rect.left * (canvas.width/rect.width), y: y - rect.top * (canvas.height/rect.height) }}5. Mit der Werkzeugfunktion in Schritt 4 können wir Mausereignisse zur Leinwand hinzufügen!
Binden Sie zunächst das Ereignis onmousedown an die Maus und zeichnen Sie mit moveTo den Startpunkt der Koordinaten.
theCanvas.onmousedown = function(e) { //Ermitteln Sie die Koordinaten des Punktes, an dem die Maus relativ zur Leinwand gedrückt wird. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Destrukturierende Zuweisung von es6 let { x, y } = ele //Der Ausgangspunkt des Zeichnens. context.moveTo(x, y)}6. Beim Bewegen der Maus gibt es kein langes Drücken der Maus. Wie kann man das überwachen?
Der kleine Trick, der hier verwendet wird, besteht darin, ein onmousemove-Ereignis (Mausbewegung) innerhalb von onmousedown auszuführen, damit die Maus überwacht und bewegt werden kann.
theCanvas.onmousedown = function(e) { //Ermitteln Sie die Koordinaten des Punktes, an dem die Maus relativ zur Leinwand gedrückt wird. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Destrukturierende Zuweisung von es6 let { x, y } = ele //Der Ausgangspunkt des Zeichnens. context.moveTo(x, y) //Mausbewegungsereignis theCanvas.onmousemove = (e) => { //Ermitteln Sie beim Verschieben die neue Koordinatenposition, verwenden Sie lineTo, um die aktuellen Koordinaten aufzuzeichnen, und zeichnen Sie dann den vorherigen Punkt mit einem Strich an der aktuelle Punktpfad let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.Stroke() }}7. Wenn Sie die Maus loslassen, wird der Pfad nicht mehr gezeichnet.
Gibt es eine Möglichkeit, die beiden oben überwachten Ereignisse im onmouseup-Ereignis zu verhindern? Es gibt viele Methoden, onmousedown und onmousemove auf null zu setzen. Ich habe hier Schalter verwendet. isAllowDrawLine wird auf einen Bool-Wert gesetzt, um zu steuern, ob die Funktion ausgeführt wird. Den spezifischen Code finden Sie unten im vollständigen Quellcode.
QuellcodeEs ist in drei Dateien unterteilt: index.html, main.js und utils.js. Ich habe Parcle verwendet, um die Entwicklungsumgebung zu konfigurieren, sodass es keine Fehler gibt, wenn Sie den Code direkt kopieren Wenn beim Ausführen ein Fehler auftritt und der Browser nicht aktualisiert werden kann, können Sie die ES6-Syntax in ES5 ändern.
1.index.html
Es wurde oben gezeigt und wird nicht noch einmal wiederholt.
2.main.js
import { windowToCanvas } from './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.Stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Holen Sie sich die Koordinaten der Maus auf der Leinwand* */const windowToCanvas = (canvas, x, y) => { let rect = canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect .width), y: y - rect.top * (canvas.height/rect.height) }}export { windowToCanvas} ZusammenfassenHier liegt ein Missverständnis vor. Ich verwende das Canvas-Objekt, um das Ereignis theCanvas.onmouseup zu binden. Tatsächlich kann Canvas keine Ereignisse binden. Da der Browser dies jedoch automatisch für Sie beurteilt und die Ereignisverarbeitung übernimmt, besteht kein Grund zur Sorge.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.