Комментарии 10
Оптимизации нет. Если спидометром предполагается пользоваться для многократного изменения значения, 4 функции из 5, очевидно, вызываются избыточно, их стоит применить один первый раз. Далее, чтобы это выглядело не как Boilerplate code, надо обернуть в объект с методами init() и setValue(). А если учесть, что эксперименты (со снежинками на Canvas) показывают, что нарисовать один слой Canvas в браузерах затратнее, чем нарисовать или повернуть один DOM-элемент стрелки спидометра, то решение, очевидно, будет просто во вращении (css transform rotate, а лучше matrix) стрелки по setValue().
+3
Я бы еще вынес «фон» спидометра на отдельный canvas, который бы расположил под другим, в котором оставил бы только рисование стрелки
+1
Разве не наоборот? DOM затратнее, чем Canvas?
0
Рисование графическими примитивами, ня. Прямо школа вспомнилась. Восьмой класс, паскаль, «uses graph», машинки из кружочков и прямоугольничков…
+4
А анимация?
0
Для начала нам нужно в DOM'е создать объект canvas:
<canvas id="canvas" width="500px" height="500px"></canvas>
Да нет никаких px
в значениях атрибутов в HTML. И для <canvas>
нет и для <Img>
и для других.
+10
А скорость чего он, собственно, измеряет?)
Могу предложить несколькими простыми строками переписать его на измерение скорости анимации (через requestAnimationFrame() ) этого добра. Ваш спидометр тогда будет показывать FPS работы самого спидометра и будет пространство для оптимизации с мгновенным визуальным выводом результата :)
Могу предложить несколькими простыми строками переписать его на измерение скорости анимации (через requestAnimationFrame() ) этого добра. Ваш спидометр тогда будет показывать FPS работы самого спидометра и будет пространство для оптимизации с мгновенным визуальным выводом результата :)
-1
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Спидометр на HTML5 Canvas