HTML5 Canvas - разные штрихи - PullRequest
Новая
       6

HTML5 Canvas - разные штрихи

7 голосов
/ 28 февраля 2012

Я должен нарисовать график с 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 ().

Как правильно это сделать?

Ответы [ 2 ]

22 голосов
/ 28 февраля 2012

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

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

0 голосов
/ 10 января 2017

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

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

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

...