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

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

HTML verwendet das Titelattribut, um Text anzuzeigen, wenn die Maus darüber schwebt

Detaillierte Erläuterung von Django + Vue + Docker zum Erstellen einer Schnittstellentestplattform

Detaillierte Erläuterung der Konfiguration des statischen Nginx-Dienstes (Root- und Alias-Anweisungen)

Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7

VPS erstellt Offline-Download-Server (nach der Ära der Netzwerkfestplatten)

So verwenden Sie eine Multi-Core-CPU, um Ihre Linux-Befehle zu beschleunigen (GNU Parallel)

N Möglichkeiten, ein Div mit einzeiligem/mehrzeiligem Text vertikal zu zentrieren (unbekannte Höhe/feste Höhe)

Drei Möglichkeiten, das längste Wort in einem String in JavaScript zu finden (empfohlen)

Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux

Artikel empfehlen

Vue implementiert die Tabellenpaging-Funktion

MySQL-Transaktions-Tutorial Yii2.0 Händler-Auszahlungsfunktion

CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Website User Experience Design (UE)

So stellen Sie Confluence und Jira-Software in Docker bereit

Allgemeine Tags in XHTML

Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express

MySQL extrahiert interne JSON-Felder und gibt sie als Zahlen aus.

Beispielcode zum Konfigurieren von Nginx zur Unterstützung von https

Allgemeine JavaScript-Anweisungen: Schleife, Beurteilung, Zeichenfolge in Zahl

Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS

Foreman Ubuntu16 Schnellinstallation

Webdesign-Tutorial (6): Behalte deine Leidenschaft für Design

CSS3-Kategoriemenüeffekt

Einführung und Verwendung von Triggern und Cursorn in MySQL