HTML5 Canvas - Strokes khác nhau

Question

Tôi phải vẽ một biểu đồ có 3 dòng khác nhau. Biểu đồ đường kẻ.

tôi đã cố gắng làm điều này:

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(); 
} 

Nhưng dường như, nét cuối cùng thu hút đối với tất cả các dòng. Vì vậy, tôi nhận được 3 dòng màu vàng, thay vì một Teal, một màu xanh lá cây và màu vàng. Tôi đã thử tạo ba Ngữ cảnh khác nhau (ctx1, ctx2 và ctx3), nhưng vì một lý do nào đó, tất cả đều được vẽ bằng lệnh "ctx3.stroke()".

Cách chính xác để thực hiện việc này là gì?

Answer 1

Thêm một cuộc gọi ctx.beginPath() trước mỗi dòng, và cũng là một ctx.closePath() sau mỗi ctx.stroke()

Nếu bạn không, mỗi khi bạn gọi phương thức stroke(), không chỉ các dòng sản phẩm mới sẽ được rút ra mà còn tất cả các trước các dòng sẽ được vẽ một lần nữa (với strokeStyle mới), vì nó là đường dẫn tương tự vẫn mở.

Answer 2

Mặc dù có câu trả lời chức năng ở đây, tôi chỉ muốn thêm phần này.

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

Tất cả đều tham chiếu đến cùng một đối tượng. Nó không tạo ra một bối cảnh mới, nó sử dụng một ngữ cảnh đã được gắn với phần tử canvas. Delta hoàn toàn đúng khi nói rằng nó vuốt màu vàng trên toàn bộ đường dẫn vì bạn không bắt đầu một đường dẫn mới. ctx.beginPath() sẽ giải quyết các rắc rối của bạn.