JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien
|
In diesem Artikel wird der spezifische Code zur Verwendung von Canvas zum Zeichnen von Koordinaten und Linien in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Mehrere Punkte an der angegebenen Position zeichnen</title>
<Stil>
Leinwand{
Rand: 1px gestrichelt grau;
}
</Stil>
</Kopf>
<Text>
<canvas id="cvs" width="500" height="500"></canvas>
</body>
</html>js-Code:
<Skript>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// Der Abstand zwischen der Koordinatenachse und dem unteren rechten und linken Rand der Leinwand var padding = {
oben: 20,
rechts:20,
unten:20,
links:20
}
// Breite und Höhe des Pfeils in der Koordinatenachse var arrow = {
Breite: 12,
Höhe:20
}
// Finde die Koordinaten des Scheitelpunkts auf der Koordinatenachse var vertexTop = {
x:padding.left,
y:padding.oben
}
// Finde die Koordinaten des Ursprungs der Koordinatenachse var origin = {
x:padding.left,
y:cvs.Höhe - Polsterung unten
}
// Finde die Koordinaten des rechten Scheitelpunkts der Koordinatenachse var vertexRight = {
x:cvs.width - Polsterung links,
y:cvs.Höhe - Polsterung unten
}
//Linienbreite festlegen ctx.lineWidth = 2;
//Zeichne zwei Linien der Koordinatenachse ctx.beginPath();
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(Ursprung.x,Ursprung.y);
ctx.lineTo(vertexRight.x,vertexRight.y);
ctx.stroke();
//Wie zeichnet man einen Pfeil//Zeichnen Sie oben einen Pfeil// ^
// |
// |
ctx.beginPath();
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(vertexTop.x - Pfeil.Breite/2,vertexTop.y + Pfeil.Höhe);
ctx.lineTo(vertexTop.x,vertexTop.y + Pfeil.Höhe/2);
ctx.lineTo(vertexTop.x + Pfeil.Breite/2,vertexTop.y + Pfeil.Höhe);
ctx.fill();
//Zeichne den Pfeil nach rechts // --->
ctx.beginPath();
ctx.moveTo(VertexRechts.x,VertexRechts.y);
ctx.lineTo(vertexRight.x - Pfeil.Höhe,vertexRight.y - Pfeil.Breite);
ctx.lineTo(vertexRight.x - Pfeil.Höhe/2,vertexRight.y);
ctx.lineTo(vertexRight.x - Pfeil.Höhe,vertexRight.y + Pfeil.Breite);
ctx.fill();
/*
* Zeichnen Sie einen Punkt an einer bestimmten Position auf der Koordinatenachse. Koordinatenalgorithmus:
* Die x-Achse eines Punkts: die x-Koordinate des Ursprungs + die horizontale Entfernung vom Punkt zum Ursprung * Die y-Achse eines Punkts: die y-Koordinate des Ursprungs - die vertikale Entfernung vom Punkt zum Ursprung */
//Definiere die Koordinaten der Punkte var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]];
//Punkte in den Koordinaten zeichnen und mit einer Schleife durch die Koordinaten im Array iterieren //Farbe festlegen ctx.fillStyle = "green";
Punkte.fürJeden(Funktion(arr){
ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5);
});
//Verbinde die Linien basierend auf den Punkten //Verhindere Neuzeichnen ctx.beginPath();
ctx.Linienbreite = 2;
ctx.strokeStyle = "gelb";
Punkte.fürJeden(Funktion (arr) {
ctx.lineTo(origin.x + arr[0] + 1.8, origin.y - arr[1] + 1.8);
});
//Strokectx.stroke();
</Skript>Die Wirkung ist wie folgt:
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:
|
<<: So implementieren Sie den Dienststatus zur Nginx-Konfigurationserkennung
>>: Erweiterte Verwendungsbeispiele für den Befehl mv in Linux
Artikel empfehlen
Navigationsdesign und Informationsarchitektur
<br />Wenn wir über Navigation sprechen, geh...
Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist
Vorwort InnoDB speichert Daten in Tablespaces. In...
Beispiel für die Integration von Kafka mit Nginx
Hintergrund nginx-kafka-module ist ein Plug-In fü...
Detaillierte Erklärung zu MySQL-Phantomlesevorgängen und wie man sie eliminiert
Inhaltsverzeichnis Transaktionsisolationsebene Wa...
Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht
In der Vergangenheit wurde Float häufig für das L...
CnBlogs - Teilen im benutzerdefinierten Blogstil
Nachdem ich die halbe Nacht daran gearbeitet hatt...
Vue realisiert den Card-Flip-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
VMware implementiert den detaillierten Prozess der unbeaufsichtigten PXE+Kickstart-Installation des Centos7-Systems
Inhaltsverzeichnis PXE implementiert die unbeaufs...
MySQL-Datenoperation – Verwendung von DML-Anweisungen
veranschaulichen DML (Data Manipulation Language)...
Lösen Sie das Problem des Syn Flooding in der MySQL-Datenbank
Der SYN-Angriff ist die häufigste und am leichtes...
Detaillierte Erklärung der Beziehung zwischen React und Redux
Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...
Vue+Element - benutzerdefinierte Abfragekomponente
In diesem Artikel wird hauptsächlich das Vue-Proj...
Verwendungsanweisungen für den Befehl „Docker Create“
Mit dem Befehl „Docker Create“ können Sie einen C...
Node+Express zum Erzielen eines Paging-Effekts
In diesem Artikel wird der spezifische Code von n...
Grundlegende Schritte zur Sicherheitseinstellung für den CentOS7-Server
Schalten Sie den Ping-Scan aus, obwohl dies nicht...