Płaszczyzna HTML5 zmienia kolory wszystkich linii

Zrobiłem prostą aplikację do rysowania z płótnem HTML5. Klikasz w dwóch różnych pozycjach, aby narysować linię od jednego punktu do drugiego. Mam również dwa pola wprowadzania tekstu, w których można zmienić grubość linii i kolor. Problem polega na tym, że kiedy zmieniam kolor linii, zmienia ona wszystkie narysowane linie. Dzieje się tak również podczas zmiany grubości linii, ale tylko wtedy, gdy narysuję grubszą linię niż poprzednio (jeśli narysuję cieńszą linię, pozostałe linie się nie zmieniają).Płaszczyzna HTML5 zmienia kolory wszystkich linii

Jestem nowy w HTML5 i wszystkie, więc każda pomoc byłaby bardzo ceniona.

<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas width="300" height="300" id="myCanvas"></canvas> 
<br /> 
<input type="button" value="Enter Coordinates" onclick="enterCoordinates()"></input> 
Line Width: <input type="text" id="lineWidth"></input> 
Line Color: <input type="text" id="lineColor"></input> 
<script type="text/javascript"> 
    var c = document.getElementById('myCanvas'); 
    var ctx = c.getContext('2d'); 
    ctx.fillStyle="#FF0000"; 
    ctx.fillRect(0,0,300,300); 
    function drawLine(start,start2,finish,finish2) 
    { 
     var c = document.getElementById('myCanvas'); 
     var ctx = c.getContext('2d'); 
      // optional variables 
      lineWidth = document.getElementById('lineWidth').value; 
      if (lineWidth) 
      { 
       ctx.lineWidth=lineWidth; 
      } 
      lineColor = document.getElementById('lineColor').value; 
      if (lineColor) 
      { 
       ctx.strokeStyle=lineColor; 
      } 
     ctx.moveTo(start,start2); 
     ctx.lineTo(finish,finish2); 
     ctx.stroke(); 
    } 
    function enterCoordinates() 
    { 
     var values = prompt('Enter values for line.\n x1,y1,x2,y2',''); 
     var start = values.split(",")[0]; 
     var start2 = values.split(",")[1]; 
     var finish = values.split(",")[2]; 
     var finish2 = values.split(",")[3]; 
     drawLine(start,start2,finish,finish2); 
    } 
</script> 
<script type="text/javascript"> 
    document.addEventListener("DOMContentLoaded", init, false); 

    function init() 
    { 
    var canvas = document.getElementById("myCanvas"); 
    canvas.addEventListener("mousedown", getPosition, false); 
    } 

    function getPosition(event) 
    { 
    var x = new Number(); 
    var y = new Number(); 
    var canvas = document.getElementById("myCanvas"); 

    if (event.x != undefined && event.y != undefined) 
    { 
     x = event.x; 
     y = event.y; 
    } 
    else // Firefox method to get the position 
    { 
     x = event.clientX + document.body.scrollLeft + 
      document.documentElement.scrollLeft; 
     y = event.clientY + document.body.scrollTop + 
      document.documentElement.scrollTop; 
    } 

    x -= canvas.offsetLeft; 
    y -= canvas.offsetTop; 
    if (window.startx) 
    { 
     window.finishx = x; 
     window.finishy = y; 
     drawLine(window.startx,window.starty,window.finishx,window.finishy); 
     // reset 
     window.startx = null; 
    } 
    else 
    { 
     window.startx = x; 
     window.starty = y; 
    } 
    } 
</script> 
</body> 
</html>

Źródło

2012-02-12 sc8ing

Wystarczy dodać closePath() połączenia (jak również beginPath) gdzie można narysować linię, jak to:

ctx.beginPath(); 
ctx.moveTo(start,start2); 
ctx.lineTo(finish,finish2); 
ctx.stroke(); 
ctx.closePath();

W przeciwnym razie zamiast rysowania tylko najnowszą linię, będziesz czerpać wszystko poprzednia linia ponownie, ponieważ otwarta ścieżka jest wciąż taka sama, powodując efekt zmiany linii i koloru, gdy to, co patrzysz, jest w rzeczywistości narysowane nad nimi.

Źródło

2012-02-12 18:57:42 Delta

Zadziałało! Wielkie dzięki. – sc8ing

Płaszczyzna HTML5 zmienia kolory wszystkich linii

Odpowiedz

Powiązane problemy