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
Verpackte Module

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.
2. Um das Zeichnen zu beenden, springt die Maus nach oben. Mouse-Up-Ereignis.
3. Drücken und bewegen Sie die Maus, um den Pfad zu zeichnen. Mausbewegungsereignis.

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.
2. Da zwischen dem Mauszeiger und der tatsächlichen Position ein Versatz besteht, müssen Sie beim Positionieren der Koordinaten pagex-10 vergrößern, damit sich die Koordinaten an der Spitze des Zeigers befinden.
3. Aktualisieren Sie die Koordinatenposition bei jeder Bewegung und verwenden Sie kleine Liniensegmente, um unregelmäßige Linien zu simulieren.

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:

JavaScript Canvas realisiert Rotationsanimation
JS+Canvas – Beispielcode zum Zeichnen eines Kegels
js Canvas realisiert den Gaußschen Unschärfeeffekt
JavaScript-Canvas-Animation zum Erzielen eines Uhreffekts
js + canvas realisiert die Zeichenbrettfunktion
JS Canvas-Oberfläche und Animationseffekte
JS verwendet Canvas, um eine rotierende Windmühlenanimation zu zeichnen
JavaScript kombiniert mit Canvas zum Zeichnen von Sportbällen

<<: Anweisungen zum Wiederherstellen von Daten nach versehentlichem Löschen einer MySQL-Datenbank

>>: So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON

Einige grundlegende Anweisungen für Docker

MySQL implementiert die kontinuierliche Anmeldefunktion und startet nach einem Tag der Anmeldung von vorne (SQL-Anweisung).

1. Erstellen Sie eine Testtabelle CREATE TABLE `t...

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

Einige grundlegende Anweisungen für Docker

Einführung in die Verwendung von exists und except in SQL Server

Lösung zum Vergessen des Root-Passworts für selbst erstelltes MySQL in Alibaba Cloud Linux CentOS 7.2

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux

Drei Verwendungszwecke und Unterschiede von MySQL sind nicht gleich

So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet

HTML-Sonderzeichen-Konvertierungstabelle

Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung

Tipps zur Verwendung von Vue-Elementen und Nuxt

Artikel empfehlen

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

MySQL 5.7.18 Installations- und Konfigurations-Tutorial unter Windows

Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel

Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript

Ursachen und Lösungen für das Problem des verstümmelten Zeichensatzes in der MySQL-Datenbank

Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6

Eingabetyp begrenzen (mehrere Methoden)

Zwei Verwendungen von iFrame-Tags in HTML

Was bedeuten CN2, GIA, CIA, BGP und IPLC?

Beispielmethode zum Bereitstellen eines React-Projekts auf Nginx

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

MySQL implementiert die kontinuierliche Anmeldefunktion und startet nach einem Tag der Anmeldung von vorne (SQL-Anweisung).

Einige Referenzen zu Farben in HTML

JavaScript-Implementierung des klassischen Schlangenspiels

CentOS 8 offiziell veröffentlicht, basierend auf Red Hat Enterprise Linux 8