HTML5 удалить предыдущий нарисованный объект в canvas
у меня есть полигональный объект (скажем, автомобиль), нарисованный внутри холста HTML5 с помощью методов moveTo и lineTo. Я хочу неоднократно рисовать этот объект в разных положениях на холсте (имитируя движущийся объект). Моя проблема в том, что предыдущий нарисованный объект не очищается. Вместо этого на холсте рисуется несколько изображений. Как я могу исправить эту проблему?
2 ответов
холсты - это просто массивы пикселей, они ничего не знают о фигурах, которые вы нарисовали.
есть анимационные трюки, которые использовались на растровых дисплеях (например, "XOR drawing"), которые можно использовать для удаления старой фигуры, прежде чем рисовать новую, но на современных машинах, как правило, намного проще (и очень быстро) просто стереть холст и начать снова для каждого кадра.
учитывая ваши комментарии к другим ответам, я бы предложил просто использовать два холста-один для статического фона и один для автомобилей. Если фоновое изображение статично, это может быть даже <img> элемент вместо холста.
Если изображение автомобиля статично, вы также можете просто нарисовать его один раз, а затем использовать CSS-позиционирование, чтобы установить его положение относительно фона для каждого кадра.
вы должны очистить холст в начале каждого розыгрыша рамки
context.clearRect(0, 0, canvas.width, canvas.height);