Почему я не могу нарисовать две строки разных цветов в моем холсте HTML5?

Я пытаюсь использовать холст HTML5, чтобы нарисовать красную линию слева от зеленой линии. Вот мой javascript:

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

Однако в Google Chrome я получаю темно-зеленую линию слева от светло-зеленой линии. Зачем? Я дважды позвонил ему дважды? Следовательно, почему мой первый удар повлияет на мою вторую?

Здесь - это JSFiddle, который иллюстрирует, что я имею в виду.

Ответ 1

Вы не вызываете canvasContext.beginPath();, когда начинаете рисовать вторую строку.

Чтобы сделать разделы чертежа более независимыми, я добавил пробелы:

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

Демо: http://jsfiddle.net/AhdJr/2/

Ответ 2

очень интересно, насколько я могу сказать, как работа webgl или opengl похожа на большой конечный автомат, где вы определяете состояние, рисуете, обновляете состояние рисования снова и так далее...

Хотя я не уверен, что холст следует тем же принципам, даже если это просто предназначено для простых рендерингов 2d.

Мне удалось запустить его, просто начав новый путь.

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

У меня ограниченный опыт работы с webgl, поэтому, если я ошибаюсь, пожалуйста, исправьте меня.