JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel
|
In diesem Artikel wird der spezifische Code von JS Canvas zur Realisierung der Zeichenbrett-/Signaturbrettfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Vorwort Eine elektronische Tafel in einem herkömmlichen elektronischen Klassenzimmer. Merkmale dieses Artikels: Natives JS Minimales Codebeispiel
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<Leinwand-ID="Leinwand"></Leinwand>
<Skript>
let c = document.getElementById('canvas');
c.width = Fenster.innereBreite;
c.height = Fenster.innereHöhe;
Lassen Sie ctx = c.getContext('2d');
// eine schwarze Tafel zeichnen
ctx.fillStyle = "schwarz";
ctx.fillRect(0,0,600,300);
//Drücken Sie die Flagge let onoff = false,
altx = -10,
alt = -10;
// Farbe festlegen let linecolor = "white";
// Zeilenbreite festlegen let linw = 4;
// Mausereignis hinzufügen // Drücken Sie c.addEventListener('mousedown', event => {
anaus = wahr;
// Position – 10 dient zum Korrigieren der Position und Platzieren der Zeichnung oben über dem Mauszeiger oldx = event.pageX – 10;
oldy = Ereignis.SeiteY - 10;
},FALSCH);
// Bewegen c.addEventListener('mousemove', event => {
wenn(anaus == wahr){
sei newx = event.pageX - 10,
newy = Ereignis.SeiteY - 10;
// Zeichnen ctx.beginPath();
ctx.moveTo(altx,alt);
ctx.lineTo(neuesx,neuesy);
ctx.strokeStyle = Linienfarbe;
ctx.lineWidth = linw;
ctx.lineCap = "rund";
ctx.stroke();
// Aktualisiere die Koordinatenposition bei jeder Bewegung oldx = newx,
alt = neu;
}
}, WAHR);
// Aufpoppen c.addEventListener('mouseup', ()=> {
anaus = falsch;
},FALSCH);
</Skript>
</body>
</html>Ergebnisse
Code Erklärung Ideen 1. Drücken Sie die Maus, um mit dem Zeichnen zu beginnen. Mauszeiger nach unten-Ereignis. Code Erklärung Die Grundidee ist: Drücken Sie die Maus, um den Bewegungsschalter auszulösen, beginnen Sie nach der Bewegung mit der Aufzeichnung der Linie (verwenden Sie die Koordinaten nach der Bewegung – die Koordinaten vor der Bewegung und zeichnen Sie dann die Linie), und bei jeder Bewegung werden die alten Koordinaten aktualisiert. Lassen Sie den Verschiebeschalter los, nachdem Sie die Maus losgelassen haben. 1. Der Effekt des Verschiebens der Zeichnung wird nur ausgelöst, wenn die Maus gedrückt wird. Daher muss eine Statusbeurteilung hinzugefügt werden. Kapselungsmodul
<Leinwand-ID="Leinwand"></Leinwand>
<Skript>
Klasse Board{
Konstruktor(CanvasName = 'Canvas', Daten = neue Map([
["anaus", falsch],
["altx", -10],
["alt", -10],
["Füllstil", "schwarz"],
["Linienfarbe", "weiß"],
["Zeilenbreite", 4],
["Zeilenende", "rund"],
["Leinwandbreite", Fenster.Innenbreite],
["Leinwandhöhe", Fenster.Innenhöhe]
])){
// diese.daten = Daten;
dies.c = document.getElementById(canvasName);
dies.ctx = dies.c.getContext('2d');
dies.onoff = data.get("onoff");
dies.oldx = data.get("oldx");
dies.oldy = data.get("oldy");
diese.Linienfarbe = data.get("Linienfarbe");
this.lineWidth = data.get("lineWidth");
dies.lineCap = data.get("lineCap");
this.c.width = data.get("Leinwandbreite");
this.c.height = data.get("canvasHeight");
this.ctx.fillStyle = data.get("fillStyle");
dies.ctx.fillRect(0,0,600,300);
}
Ereignisoperation(){
// Mausereignis hinzufügen // Drücken Sie this.c.addEventListener('mousedown', event => {
dies.onoff = wahr;
// Position – 10 dient zum Korrigieren der Position und Platzieren der Zeichnung oben über dem Mauszeiger this.oldx = event.pageX – 10;
this.oldy = Ereignis.SeiteY - 10;
},FALSCH);
// Verschieben Sie dies.c.addEventListener('mousemove', event => {
wenn(dies.onoff == true){
sei newx = event.pageX - 10,
newy = Ereignis.SeiteY - 10;
// Zeichnen this.ctx.beginPath();
dies.ctx.moveTo(dieses.altx,dieses.alty);
dies.ctx.lineTo(newx,newy);
dies.ctx.strokeStyle = diese.lineColor;
diese.ctx.lineWidth = diese.lineWidth;
dies.ctx.lineCap = dies.lineCap;
dies.ctx.stroke();
// Aktualisiere die Koordinatenposition bei jeder Bewegung this.oldx = newx,
dies.alty = newy;
}
}, WAHR);
// Öffnen Sie this.c.addEventListener('mouseup', ()=> {
dies.onoff = falsch;
},FALSCH);
}
}
lass board = neues Board();
board.eventOperation();
</Skript>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Anweisungen zum Wiederherstellen von Daten nach versehentlichem Löschen einer MySQL-Datenbank
>>: So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON
Artikel empfehlen
Vertikales und horizontales Aufteilen von MySQL-Tabellen
Vertikale Teilung Vertikale Aufteilung bezieht si...
Detaillierte Erklärung der Meta-Tags und ihrer Verwendung in HTML
Ich werde keine weitere Zeit mit Unsinnsgerede ve...
jQuery realisiert die Shuttle-Box-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Implementierungsschritte für MySQL-Zusammenführungsergebnisse und horizontale Spleißfelder
Vorwort Vor kurzem habe ich an einer Berichtsfunk...
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML sollte wie folgt geschrieben...
Detaillierte Erklärung zur Konfiguration der OpenGauss-Datenbank im Docker
Für Windows-Benutzer Verwenden von openGauss in D...
Vergessen Sie nicht, den HTML-Tag zu schließen
Das Erstellen von Webseiten, die Webstandards ents...
MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)
Einige MySQL-Tabellen können doppelte Datensätze ...
Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS
Verwenden Sie hauptsächlich die Eigenschaften „pr...
HTML ist die zentrale Grundlage für die Entwicklung von WEB-Standards
HTML-zentrierte Front-End-Entwicklung entspricht p...
Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)
•Es gibt viele Selektoren in CSS. Was passiert, w...
Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation
Der spezifische Code lautet wie folgt: <a href...
So verstehen Sie die Modularität von JavaScript
Inhaltsverzeichnis 1. Browserunterstützung 2. Exp...
Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.
Vorwort: Ich habe Warnungen zu wahnsinnig langsam...
Natives Javascript+CSS, um den Karusselleffekt zu erzielen
Dieser Artikel verwendet Javascript + CSS, um den...