Показать сообщение отдельно
Старый 06.10.2015, 23:22   #8
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Пунктирная окружность

Вот смотри, код доступен, рендер есть (ничего не нужно запускать, 1 клик по ссылке), кто хочет сейчас может код обновить и выложить ссылку на его ввариант. Удобно же!

Пунктирная окружность с регулируемым градусом дуги:
http://jsfiddle.net/bq6vvqch/

И еще версия с гарантированной последовательностью отступ > дуга, и чтобы не было где-то одного мелкого/большого отступа.
Также анимировано: http://jsfiddle.net/o8xkde88/1/

Можно еще сделать чтобы дуга могла удлиняться/укорачиваться, но гарантированно иметь одной длины отступы и другой единой длины дуги. Таким образом переход между разным числом дуг будет более плавный.

var canvas = document.getElementById('render');
var 
ctx = canvas.getContext('2d');

// step of 15 degrees in radians
var step = 5 / (180 / Math.PI);

for(var 
i = 0; i < Math.PI * 2 / step; i += 2) {
    var 
a = i * step;
    
ctx.beginPath();
    
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 8, a, a + step, false);
    
ctx.stroke();
} 
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
DarkInside (07.10.2015)