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

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

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

источник

2010-12-26 Marius Jonsson

Обратите внимание, что в то время как в режиме _retained-drawing mode_, подобном системе, как HTML или SVG-поддерживает определенные объекты, связанные с рисованными элементами, система с непрерывным рисунком в виде системы, например, HTML Canvas, - нет. С помощью SVG вы можете изменять элементы или документы после факта и перерисовывать; с HTML Canvas вы должны сами отслеживать все объекты и перерисовывать все, что вам нужно, если вы хотите изменить вывод. – Phrogz

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

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

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

источник

2010-12-27 00:06:57

Первая ссылка изменилась: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes –

Первая ссылка изменилась, но опять же: https://developer.mozilla.org/en-US/docs/ Web/API/Canvas_API/Учебное пособие/Drawing_shapes –

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

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

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

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

источник

2010-12-27 01:03:37 shfx

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

источник

2011-11-09 21:16:04

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

ответ

Смежные вопросы