Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
loms
3 / 3 / 2
Регистрация: 10.10.2010
Сообщений: 55
1

Canvas: при загрузке страницы в течении нескольких секунд плавно отрисовать с нуля до целого круга

28.09.2014, 21:12. Просмотров 563. Ответов 4
Метки нет (Все метки)

Всем привет, у меня есть круг сделанный с помощью Canvas и сейчас он статичный.Хочу сделать некое подобие круговой загрузки из него, т.е чтобы при загрузки страницы он в течении нескольких секунд плавно с нуля отрисовывался до целого круга.Возможно кто делал что-то подобное или просто есть идеи по реализации?
Единственное, что пришло пока в голову это setTimeout увеличивать конечную точку окружности, но получается ерунда какая-то.

Пример статичного круга:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
        function Cirkus() {
            var canvas = document.getElementById("Canvas");
            var c = canvas.getContext("2d");
 
            var centerX = 100; // Координата центра круга по оси X
            var centerY = 100; // Координата центра круга по оси Y
            var radius= 45; // Радиус окружности
            var startingAngle = 0 * Math.PI; // Начальная точка окружности
            var endingAngle = 2 * Math.PI;  // Конечная точка окружности
            var counterclockwise = false;
     
            c.arc(centerX,centerY, radius, startingAngle,
                    endingAngle,counterclockwise);
            c.lineWidth=5; // Толщина обводки (границы) окружности
            c.strokeStyle="#222"; // Цвет обводки (границы) окружности
            c.fillStyle = '#FFF'; // Цвет заливки окружности
            c.fill();
            c.stroke();
        }
         
            Cirkus();
    })
http://jsfiddle.net/qz23c300/

 Комментарий модератора 
На будущее - код необходимо выкладывать текстом на форум. Ссылка на песочницу может быть лишь дополнением.
0
Eva Rosalene
Pure Free Digital Ghost
4134 / 1605 / 307
Регистрация: 06.01.2013
Сообщений: 4,197
Завершенные тесты: 2
28.09.2014, 22:28 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var circle = (function (x, y, radius, percentage, fill){
    var c = this.context;
    var startAngle = -Math.PI / 2;
    var endAngle = 2 * Math.PI * (percentage / 100) - Math.PI / 2;
    
    c.lineWidth = 8;
    c.strokeStyle = 'darkblue';
    c.fillStyle = 'lightgreen';
    c.beginPath();
    c.arc(x, y, radius, startAngle, endAngle, false);
    c.stroke();
    if (!fill) return;
    
    c.beginPath();
    c.arc(x, y, (radius - c.lineWidth / 2) + 1, 0, 2 * Math.PI, false);
    c.fill();
}).bind({ context: document.querySelector('#Canvas').getContext('2d')});
 
var syncObj = {
    current: 0,
    step: 5,
    interval: null
}
var iterator = (function (){
   circle(100, 100, 45, this.current, this.current >= 100);
   if (this.current >= 100) clearInterval(this.interval);
   this.current += this.step;
}).bind(syncObj);
 
syncObj.interval = setInterval(iterator, 50);
Добавлено через 2 минуты
Демо: http://jsfiddle.net/qz23c300/2/
1
loms
3 / 3 / 2
Регистрация: 10.10.2010
Сообщений: 55
28.09.2014, 22:38  [ТС] 3
FraidZZ,
Спасибо, по функционалу то что нужно!
Еще маленький вопрос, в вашем примере края круга получаются немного "рваные"(не ровные), а в примере статичного круга они довольно гладкие.Это в следствии чего так выходит и можно ли как то их сгладить?Спасибо.
0
Eva Rosalene
Pure Free Digital Ghost
4134 / 1605 / 307
Регистрация: 06.01.2013
Сообщений: 4,197
Завершенные тесты: 2
28.09.2014, 22:44 4
loms, вот уж этого я не знаю
0
etalord
работяга
368 / 368 / 52
Регистрация: 23.05.2010
Сообщений: 947
28.09.2014, 23:05 5
из "закладок" http://preloaders.net/en/circular
0
28.09.2014, 23:05
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.