Web-Frontend
H5-Tutorial
So zeichnen Sie mit Canvas eine Flugbahn, indem Sie die Maus gedrückt halten und bewegen
So zeichnen Sie mit Canvas eine Flugbahn, indem Sie die Maus gedrückt halten und bewegen
In diesem Artikel wird hauptsächlich der Beispielcode zum Zeichnen einer Flugbahn durch Gedrückthalten und Bewegen der Maus vorgestellt. Ich werde ihn jetzt als Referenz verwenden.
Zusammenfassung
Seit ich angefangen habe zu arbeiten, habe ich über Vue, Reaktion, Regelmäßigkeit, Algorithmen, kleine Programme usw. geschrieben, aber ich habe nie über Leinwand geschrieben. weil ich wirklich nicht weiß wie!
Setzen Sie sich 2018 ein kleines Ziel: Lernen Sie Canvas. Der erzielte Effekt besteht darin, mit Canvas einige Animationen realisieren zu können, die mit CSS3 nicht einfach zu erreichen sind.
Dieser Artikel ist der erste Gewinn aus dem Lernen von Canvas. Die erste Demo, die viele Leute machen, wenn sie Canvas lernen, ist die Implementierung einer „Uhr“, aber anstatt darüber zu sprechen Ich werde darüber sprechen. Eine interessantere und einfachere Sache.
Halten Sie die Maus gedrückt, um die Spur zu zeichnen
Anforderungen
Auf einer Leinwand der Ausgangszustand Canvas hat nichts Nein, jetzt möchte ich einige Mausereignisse zum Canvas hinzufügen und mit der Maus auf dem Canvas 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!
Prinzip
Zuerst benötigen wir eine Leinwand und berechnen dann die Position der Maus Binden Sie die Ereignisse onmousedown und onmousemove an die Maus und zeichnen Sie den Pfad während der Bewegung.
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-compatible" content="ie=edge">
<title>canvas学习</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. Bestimmen Sie, ob die aktuelle Umgebung Canvas unterstützt.
In main.js schreiben wir eine selbstausführende Funktion. Das Folgende ist ein Codeausschnitt zur Beurteilung der Kompatibilität. Der „Codekörper“ wird der Kern der Implementierungsanforderungen sein.
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (!theCanvas || !theCanvas.getContext) {
//不兼容canvas
return false
} else {
//代码主体
}
})()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 erhält und sich die Leinwand an einer beliebigen Stelle auf der Seite befinden kann, sind Berechnungen erforderlich, um die tatsächlichen Mauskoordinaten zu erhalten.
Kapselt die tatsächlichen Koordinaten der Maus relativ zur Leinwand in einer Funktion. Wenn Sie sich abstrakt fühlen, können Sie ein Bild auf ein Notizpapier zeichnen, um zu verstehen, warum dieser Vorgang erforderlich ist.
Normalerweise kann dies x - rect.left und y - rect.top sein. Aber warum ist es eigentlich x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width bedeutet, das Skalierungsverhalten im Canvas zu bestimmen und das Skalierungsvielfache zu ermitteln.
const windowToCanvas = (canvas, x, y) => {
//获取canvas元素距离窗口的一些属性，MDN上有解释
let rect = canvas.getBoundingClientRect()
//x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
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) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
}6. Beim Bewegen der Maus gibt es kein langes Drücken der Maus. Wie soll ich das überwachen?
Der hier verwendete kleine Trick besteht darin, ein onmousemove-Ereignis (Mausbewegung) innerhalb von onmousedown auszuführen, sodass Sie überwachen können, wie die Maus gedrückt und bewegt wird.
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
//鼠标移动事件
theCanvas.onmousemove = (e) => {
//移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
let { x, y } = ele
context.lineTo(x, y)
context.stroke()
}
}7. Wenn die Maus losgelassen wird, 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. Das Setzen von onmousedown und onmousemove auf Null ist eine davon. 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.
Der Quellcode
ist in 3 Dateien unterteilt: index.html, main.js, utils.js. Hier wird die Syntax von es6 verwendet Verwenden von parcle Die Entwicklungsumgebung ist installiert, sodass keine Fehler auftreten. 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
/*
* 获取鼠标在canvas上的坐标
* */
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
}Zusammenfassung
Hier liegt ein Missverständnis vor: Ich verwende das Canvas-Objektbindungsereignis theCanvas.onmouseup. 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, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Verwenden Sie HTML5
So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit Canvas
Das obige ist der detaillierte Inhalt vonSo zeichnen Sie mit Canvas eine Flugbahn, indem Sie die Maus gedrückt halten und bewegen. 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
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
1378
52
Welche Schulen verwenden Leinwand?
Aug 18, 2023 pm 05:59 PM
Zu den Schulen, die Leinwand verwenden, gehören die Stanford University, das MIT, die Columbia University, die University of California, Berkeley usw. Ausführliche Einführung: 1. Die Stanford University nutzt Canvas als ihre wichtigste Online-Lernplattform. Lehrer und Studenten der Stanford University nutzen Canvas, um Kursinhalte zu verwalten und zu kommunizieren und durch Funktionen wie Online-Diskussionen, Abgabe von Aufgaben und Prüfungen zu lernen Das Polytechnic Institute und das MIT nutzen Canvas ebenfalls als Online-Lernmanagementsystem und führen die Kursverwaltung über die Canvas-Plattform durch. 3. Columbia University usw.
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.
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.
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
So zeigen Sie die Flugbahn der Mausbewegung im Edge-Browser an_Schritte zum Anzeigen der Flugbahn der Mausbewegung im Edge-Browser
Apr 02, 2024 pm 05:30 PM
1. Öffnen Sie zunächst den Edge-Browser und klicken Sie auf das eingefügte Mausgesten-Symbol. 2. Klicken Sie dann im Popup-Fenster auf die Schaltfläche „Einstellungen“. 3. Klicken Sie dann auf den Verknüpfungslink für erweiterte Einstellungen. 4. Suchen Sie dann das Einstellungselement für die Anzeige der Mausspur. 5. Aktivieren Sie dann das Kontrollkästchen vor dem Einstellungspunkt. 6. Auf diese Weise wird bei Verwendung von Mausgesten die Flugbahn der Maus angezeigt.
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
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
