HTML5画布 - 不同的笔触

Question

我必须绘制一个有3条不同线条的图形.线图.

我试过这样做:

function draw() 
{  
    var canvas = document.getElementById("canvas");  
    var ctx = canvas.getContext("2d");      
    ctx.lineWidth=10;

    ctx.strokeStyle="teal";
    ctx.moveTo(10,CompanyA[0]);
    ctx.lineTo(110,CompanyA[1]);
    ctx.lineTo(210,CompanyA[2]);
    ctx.stroke();


    ctx.strokeStyle="green";
    ctx.moveTo(10,CompanyB[0]);
    ctx.lineTo(110,CompanyB[1]);
    ctx.lineTo(210,CompanyB[2]);
    ctx.stroke();       

    ctx.strokeStyle="yellow";
    ctx.moveTo(10,CompanyC[0]);
    ctx.lineTo(110,CompanyC[1]);
    ctx.lineTo(210,CompanyC[2]);
    ctx.stroke();
}

但显然,最后一击是为了所有线条.所以我得到3条黄线,而不是青色,绿色和黄色.我尝试创建三个不同的Context(ctx1,ctx2和ctx3),但出于某种原因,所有都是使用"ctx3.stroke()"调用绘制的.

这样做的正确方法是什么？

Answer 1

ctx.beginPath()在每一行之前添加一个呼叫,并在每一行ctx.closePath()之后添加呼叫ctx.stroke()

如果不这样做,每次调用stroke()方法时,不仅会绘制新线,而且还会再次绘制所有前面的线(使用新的strokeStyle),因为它是仍然打开的相同线路径.