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: