javascript HTML5 Canvas 更改所有线条的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9251507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas changes colors of all lines
提问by sc8ing
I made a simple drawing app with HTML5 canvas. You click in two different positions to draw a line from one point to another. I also have two text input boxes where you can change the line thickness and color. Problem is, when I change the color of a line it changes allthe previously drawn lines. This also happens when changing line thickness, but only if I draw a thicker line than before (if I draw a thinner line the other lines do not change).
我用 HTML5 画布制作了一个简单的绘图应用程序。您可以在两个不同的位置单击以绘制一条从一个点到另一个点的线。我还有两个文本输入框，您可以在其中更改线条粗细和颜色。问题是，当我更改一条线的颜色时，它会更改所有先前绘制的线。更改线条粗细时也会发生这种情况，但前提是我画的线条比以前更粗（如果我画的线条更细，其他线条不会改变）。
I'm new to HTML5 and all so any help would be greatly appreciated.
我是 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>
回答by Delta
Just add a closePath()call (as well as beginPath) where you draw your line, like this:
只需在您画线的地方添加一个closePath()调用（以及beginPath），如下所示：
ctx.beginPath();
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
ctx.closePath();
Otherwise instead of drawing only the newest line, you're gonna draw all the previous lines again because the open path is still the same, thus causing the effect of the lines changing color and width when what you're looking at is actually new lines being drawn over them.
否则，不是只绘制最新的线，您将再次绘制所有以前的线，因为开放路径仍然相同，从而导致当您看到的实际上是新线时，线会改变颜色和宽度的效果被他们吸引。
