Как очистить canvas?

[ravend]

Всем привет!

не могу очистить canvas от устаревшего изображения

изображение рисуется так:

context = canvas.getContext("2d");
...
context.moveTo(this.x, this.y);
context.lineTo(CANVAS_WIDTH, Math.floor(Math.random() * CANVAS_HEIGHT));
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.stroke();
...

для очистки экрана использую метод:

context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

по логике в каждом кадре должна появляться одна красная линия с произвольными координатами

но на деле линии начинают добавляться

видимо координаты старых линий тоже сохранились в context

как можно очистить не только экран (clearRect) но и удалить старые координаты линий из context?

Спасибо

[hedgehog]

по логике в каждом кадре должна появляться одна красная линия с произвольными координатами

но на деле линии начинают добавляться

видимо координаты старых линий тоже сохранились в context

как можно очистить не только экран (clearRect) но и удалить старые координаты линий из context?

Спасибо

У вас каждая новая линия добавляется к пути и весь путь отрисовывается используйте метод .beginPath(), чтобы указать, что начинаете новый path, а не продолжаете старый

context.beginPath();
context.moveTo(this.x, this.y);
context.lineTo(CANVAS_WIDTH, Math.floor(Math.random() * CANVAS_HEIGHT));
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.stroke();

А еще я советую не менять свойства канвы в каждом кадре, если этого не нужно. Слишком ресурсоемко. В вашем примере достаточно задать lineWidth и strokeStyle один раз. Кроме того, желательно избегать очистки ВСЕГО канваса, если это возможно. Жрет проц неимоверно

Edited March 20, 2012 by hedgehog