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
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...
Das Linux-System verbietet den Remote-Login-Befehl des Root-Kontos
PS: So deaktivieren Sie die Remote-Anmeldung des ...
jQuery implementiert das Ausblenden und Anzeigen von HTML-Elementen
Lassen Sie uns die Funktion von Taobao nachahmen,...
Spielen Sie mit der Connect-Funktion mit Timeout in Linux
Im vorherigen Artikel haben wir mit Timeouts unte...
So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen
Nginx-Server nginx ist ein ausgezeichneter Webser...
Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen
Vorwort Mit der Entwicklung großer Frontends tauc...
Die MySQL-ID beginnt von 1 zu steigen, um das Problem der diskontinuierlichen ID schnell zu lösen
Die MySQL-ID beginnt bei 1 und erhöht sich automa...
Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung
Das Datenvolumen ist ein wichtiges Konzept von Do...
MySQL Deep Paging (wie man schnell Millionen von Daten paginiert)
Inhaltsverzeichnis Vorwort Fall Optimierung Zusam...
WML-Tag-Zusammenfassung
Strukturbezogene Tags ----------------------------...
Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)
Einführung in Debian Debian bezeichnet im weitere...
Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen
Das Internet ist bereits voll von Artikeln dieser...
Detaillierte Erläuterung der CSS-Bildspleißtechnologie (Sprite-Bild)
CSS-Bildspleißtechnologie 1. Bildzusammenfügung B...
So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke
Vorwort: Das am häufigsten verwendete logische My...
Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)
Ob das Mapping der Mausposition oder das Implemen...