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），但出于某种原因，所有都是用＆＃34; ctx3.stroke（）＆＃34;呼叫。

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

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");

它们都引用同一个对象。它不会创建新的上下文，它使用已附加到canvas元素的上下文。 Delta完全正确地说它在整个路径上都是黄色的，因为你没有开始新的路径。 ctx.beginPath()将解决您的麻烦。

HTML5画布 - 不同的笔触

2 个答案: