✔ Gezeichnete Linien ändern Farbe (canvas)?

znieh99 · 12. Oktober 2021

Hallo Forum,
ich habe ein seltsames Problem mit JS und Canvas. Ich zeichne mehrere Linien nacheinander in verschiedenen Farben. Jedoch bekommen alle bisher gezeichneten Linien die Farbe der zuletzt gezeichneten Linie. Was mache ich falsch?

Javascript:

function start() {
    var colBright = ["hsl(240, 100%, 75%)", "hsl(320, 100%, 75%)",
        "hsl(0, 100%, 75%)", "hsl(60, 100%, 75%)", "hsl(120, 100%, 75%)",
        "hsl(180, 100%, 75%)"];
        
    let cObj = document.getElementById("canvas");
    canv = cObj.getContext('2d');
        // hole aktuellen Farbindex
    let counter = document.getElementById("my_id").value;
    counter = parseInt(counter);
    canv.lineWidth="11";
    canv.strokeStyle= colBright[counter];   //setze Farbe
    let posX = counter + 1;
    canv.moveTo((posX) * 20, 50);           //Startpunkt
    canv.lineTo((posX) * 20, 200);          //Endpunkt der Linie
    canv.stroke();                          // Zeichne Linie
    document.getElementById("my_id").value = posX;  //setze nächsten Farbindex
}

HTML:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="js/meinscript.js" ></script>
    </head>
    <body>
        <div id="Window">
            <input id='my_id' value="0"><br>
            <canvas id="canvas" width="380" height="330" style="border:1px solid #000000;"></canvas>
        </div>
        <button type="button" onclick="start()">Try it</button>
    </body>
</html>

Sempervivum · 12. Oktober 2021

Das hängt damit zusammen, dass sich das Zeichnen deiner Linien immer im selben Pfad abspielt, daher wirkt das stroke immer auf alle Elemente des Pfades, d. h. auf alle Linien.
Du kannst das sehr leicht beheben, indem Du vor jedem Zeichnen einen neuen Pfad beginnst:
CanvasRenderingContext2D.beginPath() - Web APIs | MDN

Code:

            canv.beginPath();
            canv.moveTo((posX) * 20, 50); //Startpunkt
            canv.lineTo((posX) * 20, 200); //Endpunkt der Linie
            canv.stroke(); // Zeichne Linie

znieh99 · 12. Oktober 2021

Sempervivum hat gesagt.:
Das hängt damit zusammen, dass sich das Zeichnen deiner Linien immer im selben Pfad abspielt, daher wirkt das stroke immer auf alle Elemente des Pfades, d. h. auf alle Linien.
Du kannst das sehr leicht beheben, indem Du vor jedem Zeichnen einen neuen Pfad beginnst:
CanvasRenderingContext2D.beginPath() - Web APIs | MDN

Code:

canv.beginPath(); canv.moveTo((posX) * 20, 50); //Startpunkt canv.lineTo((posX) * 20, 200); //Endpunkt der Linie canv.stroke(); // Zeichne Linie

Danke! Das war ja einfach.

✔ Gezeichnete Linien ändern Farbe (canvas)?

znieh99

Grünschnabel

Sempervivum

Erfahrenes Mitglied

znieh99

Grünschnabel

Neue Beiträge