sc8*_*ing 22 javascript html5 canvas
我用HTML5画布制作了一个简单的绘图应用程序.单击两个不同的位置可以从一个点到另一个点绘制一条线.我还有两个文本输入框,您可以在其中更改线条粗细和颜色.问题是,当我改变一条线的颜色时,它会改变以前绘制的所有线条.更改线条粗细时也会发生这种情况,但只有当我绘制比以前更粗的线条时(如果我绘制更细的线条,其他线条不会改变).
我是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>
Del*_*lta 33
只需添加一个closePath()调用(以及beginPath)绘制线条的位置,如下所示:
ctx.beginPath();
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
ctx.closePath();
否则不会仅绘制最新的线条,而是会再次绘制所有前面的线条,因为开放路径仍然相同,因此当您正在查看的内容实际上是新线条时,会导致线条改变颜色和宽度的效果被他们吸引.