Как стать автором
Обновить

Комментарии 10

Оптимизации нет. Если спидометром предполагается пользоваться для многократного изменения значения, 4 функции из 5, очевидно, вызываются избыточно, их стоит применить один первый раз. Далее, чтобы это выглядело не как Boilerplate code, надо обернуть в объект с методами init() и setValue(). А если учесть, что эксперименты (со снежинками на Canvas) показывают, что нарисовать один слой Canvas в браузерах затратнее, чем нарисовать или повернуть один DOM-элемент стрелки спидометра, то решение, очевидно, будет просто во вращении (css transform rotate, а лучше matrix) стрелки по setValue().
Я бы еще вынес «фон» спидометра на отдельный canvas, который бы расположил под другим, в котором оставил бы только рисование стрелки

Разве не наоборот? DOM затратнее, чем Canvas?

CSS трансформации (не путать с изменнением layout) для DOM элементов работают несколько быстрее, потому для плавного перетаскивания и зума яндекс-карт используют CSS transform, а затем перерисовывают canvas
Рисование графическими примитивами, ня. Прямо школа вспомнилась. Восьмой класс, паскаль, «uses graph», машинки из кружочков и прямоугольничков…
Анимация — это тема для отдельной статьи, имхо
Для начала нам нужно в DOM'е создать объект canvas:
<canvas id="canvas" width="500px" height="500px"></canvas>


Да нет никаких px в значениях атрибутов в HTML. И для <canvas> нет и для <Img> и для других.

Спасибо, исправил
А скорость чего он, собственно, измеряет?)

Могу предложить несколькими простыми строками переписать его на измерение скорости анимации (через requestAnimationFrame() ) этого добра. Ваш спидометр тогда будет показывать FPS работы самого спидометра и будет пространство для оптимизации с мгновенным визуальным выводом результата :)
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории