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

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

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

6
canvas graph html5 line

2 ответов

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

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

21

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

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

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

0