HTML5画布更改所有线条的颜色

Question

HTML5画布更改所有线条的颜色

28

我用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>

- sc8ing

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Delta · Accepted Answer

只需在绘制线条的地方添加closePath()调用（以及beginPath），像这样：

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

否则，如果不仅仅绘制最新的线条，还会重新绘制所有以前的线条，因为开放路径仍然是相同的，从而导致当你实际上正在绘制新线条时，线条的颜色和宽度发生变化的效果。