HTML5画布 - 不同的笔画

我必须绘制一个3行不同的图。线图。HTML5画布 - 不同的笔画

我试着这样做：

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（）”调用绘制的。

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

来源

2012-02-28 Kiloku

的每行前添加一个ctx.beginPath()电话，也是一个ctx.closePath()每ctx.stroke()

后，如果你不这样做，你每次调用stroke()方法，不仅是新线将被吸引，而且以前所有的线将再次绘制（使用新的strokeStyle），因为它是仍然打开的相同线路。

来源

2012-02-28 02:19:43 Delta

这是正确的，但只是为了增加一些解释：您已经组装了三段的路径，第一部分是青色，第二部分是绿色，然后是三部分都是黄色。黄色正在吸引其他人。 – 2012-02-28 02:22:15

嘿，谢谢Russell Zahniser，我为我的回答添加了一个解释。 – Delta 2012-02-28 02:24:31

非常感谢，伙计们，它的工作原理：D – Kiloku 2012-02-29 01:45:41

虽然这里有一个功能性的答案，但我只想补充一点。

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

它们都指向同一个对象。它不创建新的上下文，它使用已经附加到canvas元素的那个上下文。达美航空是完全正确的，因为你没有开始一条新的道路，它在整条道路上泛黄。 ctx.beginPath()将解决您的烦恼。

来源

2017-01-09 21:15:25 RoboticRenaissance

HTML5画布 - 不同的笔画

回答

相关问题