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

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

28.09.2014, 21:12. Просмотров 553. Ответов 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
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.09.2014, 21:12
Ответы с готовыми решениями:

Если пользователь ничего не предпринимает в течении нескольких секунд, тогда выполняется какое-либо действие
Ребята, нужно написать программу. Если пользователь ничего не предпринимает в течении нескольких...

Индексация страницы сайта в течении нескольких минут!!!!!
Как быстро показать свою страницу поисковикам,чтоб они ее схавали (особенно Яндексу)?-Легко!...

При наведении на кнопку заливать фон слева направо в течении двух секунд
Доброго времени суток! хочу спросить, как мне сделать так, чтобы при наведении на кнопку фон...

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

Заполнение progressbar в течении 3 секунд
на форме прогрессбар и лабел. Необходимо заполнять прогресс бар в течении 3х секунд и в label...

4
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
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.09.2014, 23:05

Функция, меняющая переменную в течении 20 секунд
Нужна ф-ция, которая будет записывать в переменную значения из массива в течении 20 секунд....

Использование PNG, подключить, загрузить, отрисовать на Canvas
Нужен добрый совет. Раньше на форуме натыкался на код, в котором загружалась и использовалась PNG...

Если ответ от сервера не пришел в течении 45 секунд то
Нужно сделать так: Отсылаем реквест.Если через 45 секунд ответ не пришел или пришел,но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

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