Вторник, 01.07.2025, 19:31
Приветствую Вас Гость | Регистрация | Вход
|
Мой сайт |
| Статистика |
|---|
На сайте 1 Гостей: 1 Пользователей: 0 |
|
Каталог статей
Немного паскаля/ Анимированый загрузчик без изображения
<article><canvas width="100" height="100"></canvas></article>
<script>
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
function buildSpinner(data) {
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
document.getElementsByTagName('article')[0].appendChild(canvas);
var ctx = canvas.getContext("2d"),
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
for (i = 0; i < degrees; i++) {
degreesList.push(i);
}
// reset
i = 0;
// so I can kill it later
window.canvasTimer = setInterval(draw, 1000/degrees);
function reset() {
ctx.clearRect(0,0,100,100); // clear canvas
var left = degreesList.slice(0, 1);
var right = degreesList.slice(1, degreesList.length);
degreesList = right.concat(left);
}
function draw() {
var c, s, e;
var d = 0;
if (i == 0) {
reset();
}
ctx.save();
d = degreesList[i];
c = Math.floor(255/degrees*i);
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
ctx.lineWidth = data.size;
ctx.beginPath();
s = Math.floor(360/degrees*(d));
e = Math.floor(360/degrees*(d+1)) - 1;
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
ctx.stroke();
ctx.restore();
i++;
if (i >= degrees) {
i = 0;
}
}
}
</script>
|
| Категория: Мои статьи | Добавил: Ангел (03.08.2011)
|
| Просмотров: 442
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|