Холст HTML5 - Различные штрихи

Question

Мне нужно нарисовать график с тремя различными строками. Линейный граф.

Я попытался сделать это:

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 желтые линии, вместо тикового, зеленого и желтого. Я попытался создать три разных контекста (ctx1, ctx2 и ctx3), но по какой-то причине все они были нарисованы с помощью вызова «ctx3.stroke()».

Что было бы правильным способом сделать это?

Answer 1

Добавить ctx.beginPath() вызов перед каждой линии, а также ctx.closePath() после каждого ctx.stroke()

Если вы не каждый раз, когда вы называете stroke() метод, не только новая линия будет нарисована, но и все предыдущие линии будут снова нарисованы (с новым штрихомStyle), так как это тот же путь линии, который все еще открыт.

Answer 2

Хотя здесь есть функциональный ответ, я просто хотел бы добавить это.

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

Все они относятся к одному и тому же объекту. Он не создает новый контекст, он использует тот, который уже прикреплен к элементу canvas. Дельта совершенно прав, говоря, что она гладит по всему пути, потому что вы не начали новый путь. ctx.beginPath() решит ваши проблемы.