Как удалить объект с холста?

Question

Я делаю этот скрипт, который будет вращать стрелку на тахометре, используя холст. Я новичок в этом холсте. Это мой код:

function startup() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var meter = new Image();
  meter.src = 'background.png';
  var pin = new Image();
  pin.src = 'needle.png';
  context.drawImage(meter,0,0);
  context.translate(275,297);
  for (var frm = 0; frm < 6000; frm++){
    var r=frm/1000;               //handle here                                
    var i=r*36-27;  //angle of rotation from value of r and span
    var angleInRadians = 3.14159265 * i/180;  //converting degree to radian                
    context.rotate(angleInRadians); //rotating by angle
    context.drawImage(pin,-250,-3);  //adjusting pin center at meter center
  }
}

Вот скрипт в действии:

http://www.kingoslo.com/instruments/

Проблема, как вы видите, в том, что красная стрелка не удаляется между каждой петлей.

Что мне нужно сделать, это очистить холст для объекта булавки между каждым циклом цикла. Как мне это сделать?

Спасибо.

С уважением,
Marius

Answer 1

Используйте clearRect , чтобы очистить холст (либо его части, либо весь объект).Объект HTML canvas - это просто растровое растровое изображение пикселей, поэтому на холсте нет понятия «объекты».

Также следует помнить, что JavaScript является однопоточным, поэтому цикл for не будет анимирован.стрелка, он просто будет сидеть и рисовать все обновления, после того, как это будет сделано, браузер фактически обновит видимый холст с его последним состоянием.

Если вы хотите анимировать его, вам нужно будет создать цикл рендеринга.,В Dev.Opera есть статья о контроле частоты кадров , которая должна помочь вам начать, тогда вам просто нужно анимировать иглу на каждом кадре.

Answer 2

Простой ответ: перерисовать холст под прямым углом.

Использовать context.clearRect () или установить ширину холста на то же значение (изменение его на любое значение очистит холст);

Это быстро, и нет никакой возможности двигать только иглой.Все полотно построено таким образом.

Draw.Изменить?Перерисовки.

Answer 3

Поскольку вы используете статическое фоновое изображение, и только игла является динамической, вы можете просто использовать несколько полотен.Расположите их друг над другом, используя css.Добавьте изображение тахометра на холст сзади.Примените скрипт иглы к верхнему холсту.Таким образом, вам не нужно перерисовывать изображение каждый раз, когда вы обновляете иглу.И как другие ответы объясняют, перерисовка означает очистить контекст и снова нарисовать иглу.