Tại sao tôi không thể vẽ hai dòng màu khác nhau trong canvas HTML5 của mình?

Question

Tôi đang cố gắng sử dụng canvas HTML5 để vẽ đường màu đỏ ở bên trái của đường màu xanh lá cây. Đây là javascript của tôi:

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 
var canvasContext = canvas.getContext('2d'); 
canvasContext.beginPath(); 

// Draw the red line. 
canvasContext.strokeStyle = '#f00'; 
canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.stroke(); 

// Draw the green line. 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#0f0'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas);​ 

Tuy nhiên, trong Google Chrome, tôi nhận được đường kẻ màu xanh đậm ở bên trái của đường kẻ màu xanh lục nhạt. Tại sao? Tôi gọi đột quỵ hai lần phải không? Do đó, tại sao cơn đột quỵ đầu tiên của tôi ảnh hưởng đến cơn đột quỵ thứ hai của tôi?

Here là một JSFiddle minh họa ý của tôi.

Answer 1

Bạn không gọi số canvasContext.beginPath(); khi bắt đầu vẽ dòng thứ hai của mình.

Để làm cho phần vẽ độc lập hơn, tôi đã thêm khoảng trắng:

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 

var canvasContext = canvas.getContext('2d'); 

// Draw the red line. 
canvasContext.beginPath(); 
canvasContext.strokeStyle = '#f00'; 
canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.stroke(); 

// Draw the green line. 
canvasContext.beginPath(); 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#0f0'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas); 

Demo: http://jsfiddle.net/AhdJr/2/

Answer 2

rất thú vị như xa như tôi có thể nói đường webgl hoặc làm việc OpenGL cũng giống như một máy nhà nước lớn, nơi bạn định nghĩa một nhà nước, vẽ, cập nhật trạng thái các vẽ một lần nữa, và vân vân ...

Mặc dù Tôi không chắc liệu canvas có tuân theo các nguyên tắc giống nhau hay không ngay cả khi nó chỉ có nghĩa là đối với các kết xuất 2d đơn giản.

Tôi quản lý để ge nó hoạt động chỉ đơn giản là bắt đầu một con đường mới.

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 
var canvasContext = canvas.getContext('2d'); 
canvasContext.beginPath(); 

// Draw the red line. 

canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.strokeStyle = '#FF0000'; 
canvasContext.stroke(); 

canvasContext.beginPath(); // begin new path 
// Draw the green line. 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#00FF00'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas);​ 

Tôi có kinh nghiệm hạn chế với webgl vì vậy nếu Im nhầm, hãy sửa tôi.