Индикатор искусственного горизонта на HTML5 canvas

[Skinta]

Вашу программу можно написать чуть лучше, если в начале функции отрисовки прибора предустановить аффинную матрицу в видеокарту:
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
ctx.translate(0.5 ctx.canvas.width,0.5 ctx.canvas.height);
Переменные: centreX, centreY, – нужно будет удалить.Ошибки цвета отдельных пикселей исчезнут. Контуры линий будут сглаженными. Вы можете взглянуть, как вашу программу переделал другой автор (klinachevnv.ru/slides/IMG/attitude.htm).

[yevgen12]

Переменные: centreX, centreY, – нужно будет удалить.

В Вашем варианте, как я понимаю, положение индикатора жестко закодировано внутри функции. Меньше аргументов — это плюс. С другой стороны, если, к примеру, в процессе отображения нам понадобится менять конфигурацию приборной панели, то индикатор уже никуда не переместить. Если только менять значения каких-то глобальных переменных, что тоже нехорошо. Еще есть вариант полей объекта, если сделать в виде метода. Но по сути тот же вариант глобальных переменных, хотя, может быть это и было бы самое правильное решение. Тоже думал об этом длинном списке аргументов, в итоге сделал что сделал.

Ошибки цвета отдельных пикселей исчезнут.

Это, наверное, Вы про белые точки на фоне неба? В оригинале при воспроизведении у меня их и нет. В статье анимация записана в gif. Думаю, дело в том, что в гиф просто слишком мало цветов.

Спасибо. Обязательно рассмотрю Ваш код повнимательнее.

[yevgen12]

Контуры линий будут сглаженными.

Это есть.