html5如何修改画布颜色,javascript – HTML5 Canvas可以更改所有行的颜色

我用

HTML5画布制作了一个简单的绘图应用程序.您可以点击两个不同的位置,从一个点到另一个点绘制一条线.我还有两个文本输入框,您可以在其中更改线条粗细和颜色.问题是,当我改变一行的颜色时,会改变所有之前绘制的线条.当更改线条厚度时也会发生这种情况,但是只有当我画出比以前更粗的线条(如果我画一条较薄的线条,其他线条不会改变).

我是HTML5的新手,所有的帮助将不胜感激.

Canvas

Line Width:

Line Color:

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);

}

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;

}

}