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

Question

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

var moveX,

    moveY,

    toX,

    toY

canvas.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之后要重新绘制这个数组里的对象、相当于在前台做记录了