Canvas中如何用鼠标绘制出多条直线？

Question

var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')var moveX,    moveY,    toX,    toYcanvas.addEventListener('mousedown', function (e) {    moveX = e.clientX    moveY = e.clientY    canvas.addEventListener('mousemove', drawLine)})canvas.addEventListener('mouseup', function (e) {    canvas.removeEventListener('mousemove', drawLine)})function drawLine(e) {    toX = e.clientX    toY = e.clientY    ctx.clearRect(0, 0, 600, 400)    ctx.beginPath()    ctx.moveTo(moveX, moveY)    ctx.lineTo(toX, toY)    ctx.closePath()    ctx.stroke()}以上代码可以用鼠标绘制一条直线（鼠标按下，开始绘制，鼠标移动时，显示绘制路径，鼠标抬起，结束绘制），但是这样只能绘制一条（因为代码中加入了clearRect，但是不加的话，会显示所有绘制路径），怎么能在绘制下一条的时候不擦除之前绘制的线条呢？

Answer 1

在鼠标绘制之后、根据鼠标绘制的直线、拓展一个数组、每次clear之后要重新绘制这个数组里的对象、

相当于在前台做记录了