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?
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>