Спидометр на HTML5 Canvas

[spmbt]

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

[lekzd]

Я бы еще вынес «фон» спидометра на отдельный canvas, который бы расположил под другим, в котором оставил бы только рисование стрелки

[Alex_ME]

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

[lekzd]

CSS трансформации (не путать с изменнением layout) для DOM элементов работают несколько быстрее, потому для плавного перетаскивания и зума яндекс-карт используют CSS transform, а затем перерисовывают canvas

[Sirion]

Рисование графическими примитивами, ня. Прямо школа вспомнилась. Восьмой класс, паскаль, «uses graph», машинки из кружочков и прямоугольничков…

[mediakotm]

А анимация?

[slavontkn]

Анимация — это тема для отдельной статьи, имхо

[homm]

Для начала нам нужно в DOM'е создать объект canvas:

<canvas id="canvas" width="500px" height="500px"></canvas>

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

[slavontkn]

Спасибо, исправил

[Flakky]

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

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