HTML5 Canvas cambia i colori di tutte le linee

Ho realizzato una semplice applicazione di disegno con canvas HTML5. Fai clic in due posizioni diverse per tracciare una linea da un punto a un altro. Ho anche due caselle di immissione testo in cui è possibile modificare lo spessore e il colore della linea. Il problema è che, quando cambio il colore di una riga, cambia tutte le linee precedentemente disegnate. Questo accade anche quando si modifica lo spessore della linea, ma solo se disegno una linea più spessa rispetto a prima (se disegno una linea più sottile le altre linee non cambiano).HTML5 Canvas cambia i colori di tutte le linee

Sono nuovo di HTML5 e tutti modo che qualsiasi aiuto sarebbe molto apprezzato.

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

fonte

2012-02-12 sc8ing

Basta aggiungere un closePath() chiamata (così come beginPath) dove si disegna la linea, in questo modo:

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

In caso contrario invece di pescare solo la nuova linea, stai per trarre tutte le linee precedenti ancora perché il percorso aperto è sempre lo stesso, causando così l'effetto delle linee che cambiano colore e larghezza quando quello che stai guardando è in realtà nuove linee disegnate su di loro.

fonte

2012-02-12 18:57:42 Delta

Ha funzionato! Molte grazie. – sc8ing

HTML5 Canvas cambia i colori di tutte le linee

risposta

Problemi correlati