html5 - 如何用html+CSS+JavaScript做出涂鸦板的效果，改变线条的颜色怎么做？

Question

如何用html+CSS+JavaScript做出涂鸦板的效果，改变线条的颜色怎么做？
用点击按钮来改变线条的颜色应该怎么做？

document.getElementById("yellow").onclick = function(){
        ctx.save();
        ctx.strokeStyle = "yellow";
    }
  c.addEventListener("mousemove",function(){
        var evt = evt || window.event;
        if (flag) {
            var endX = evt.clientX - 10;
            var endY = evt.clientY - 10
            ctx.lineTo(endX,endY);
            ctx.stroke();
        }
    });
    
    这样做的话改变颜色之后，之前画的线条的颜色也会跟着改变，如何能够只改变按下按钮之后的线条的颜色，而不改变之前画的线条的颜色呢？

Answer 1

用canvas

Answer 2

你应该去了解下Canvas里的beginPath和closePath,应该需要用到！

Answer 3

画完一条线 即 mouseup 时需要使用 closePath