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本の黄色の線を得ます。 私は3つの異なるコンテキスト（ctx1、ctx2、ctx3）を作成しようとしましたが、何らかの理由ですべてが "ctx3.stroke（）"呼び出しで描画されました。

これを行う正しい方法は何でしょうか？

Answer 1

すべての行の前にctx.beginPath()呼び出しを追加し、そうでない場合もctx.closePath()

ctx.stroke()すべての後、あなたは stroke()メソッドを呼び出すたびに、新しいラインが描かれただけでなく、すべての前のことだけでなく、行はまだ開いている行のパスと同じであるため、新しいstrokeStyleを使用して再度描画されます。

Answer 2

ここに機能的な回答がありますが、これを追加したいだけです。

var ctx1 = canvas.getContext("2d"); 
var ctx2 = canvas.getContext("2d"); 
var ctx3 = canvas.getContext("2d"); 

これらはすべて同じオブジェクトを参照します。新しいコンテキストを作成するのではなく、既にキャンバス要素にアタッチされているコンテキストを使用します。 Deltaは新しいパスを開始しなかったので、パス全体で黄色にストロークしていると言っても間違いありません。 ctx.beginPath()あなたの問題を解決します。