HTML5 Canvas изменяет цвета всех строк

Я сделал простое приложение для рисования с холстом HTML5. Вы нажимаете в двух разных положениях, чтобы нарисовать линию от одной точки к другой. У меня также есть два окна ввода текста, где вы можете изменить толщину и цвет линии. Проблема в том, что когда я меняю цвет строки, он меняет все ранее нарисованные линии. Это также происходит при изменении толщины линии, но только если я рисую более толстую линию, чем раньше (если я рисую более тонкую линию, другие строки не меняются).HTML5 Canvas изменяет цвета всех строк

Я новичок в HTML5 и все, поэтому любая помощь будет принята с благодарностью.

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

источник

2012-02-12 sc8ing

Просто добавьте closePath() вызов (а также beginPath), где вы рисуете свою линию, как это:

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

В противном случае вместо того, чтобы рисовать только новейшую линию, вы собираетесь рисовать все предыдущие строки снова, потому что открытый путь все тот же, что вызывает влияние линий, меняющих цвет и ширину, когда на самом деле вы просматриваете новые линии.

источник

2012-02-12 18:57:42 Delta

Это сработало! Большое спасибо. – sc8ing

HTML5 Canvas изменяет цвета всех строк

ответ

Смежные вопросы