HTML5 Canvas更改所有行的颜色 [英] HTML5 Canvas changes colors of all lines
问题描述
我使用HTML5 canvas绘制了一个简单的绘图应用程序。您在两个不同的位置单击以从一个点绘制一条线到另一个点。我还有两个文本输入框，您可以在其中更改线粗细和颜色。问题是，当我改变一行的颜色，它改变所有之前绘制的线。这也发生在改变线条粗细时，但是如果我画一条比以前更粗的线（如果我画一条更细的线，其他线不改变）。
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 all the 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.
<!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>
推荐答案
只需添加 closePath ）调用（以及 beginPath ），如下所示：
Just add a closePath() call (as well as beginPath) where you draw your line, like this:
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.
这篇关于HTML5 Canvas更改所有行的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
