Доброго времени суток! Давно хотел побаловаться с html5 canvas. Когда стал вопрос, что же сделать этакое не слишком трудоемкое и не слишком убогое, решил сделать заменитель иконки ожидания (gif рисунка).
В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.
Исходный код:
Исходный код не является образцом красоты, качества и валидности кода, ибо создавался впопыхах.
Всем спасибо за внимание, надеюсь эта статья будет для кого-нибудь полезной.
В общем вот что у меня получилось: http://receipt.of.by/html5_canvas/html5_canvas.html. Всем смотрящим просьба смотреть не менее 5 секунд — будет сюрприз.
Исходный код:
<html>
<head>
<title>worm</title>
</head>
<body style="background-color:#fff">
<div id='parent' style="position:absolute; top:200px;left:200px;">
<canvas id='example' width="50" height="50">Обновите браузер</canvas>
</div>
<script>
function Worm() {
var ctx;
this.upWorm = function() {
ctx.moveTo(0,49);
ctx.bezierCurveTo(10, 33, 33, 16, 49, 49);
ctx.stroke();
}
this.downWorm = function() {
ctx.moveTo(0,49);
ctx.bezierCurveTo(10, 48, 33, 42, 49, 49);
ctx.stroke();
}
this.startWorm = function(marginLeft, marginTop) {
var parent = document.getElementById('parent');
window.clearInterval(circleInter);
parent.innerHTML = '';
var canv = document.createElement('canvas');
canv.width = 50;
canv.height = 50;
canv.style.marginLeft = marginLeft || 0;
canv.style.marginTop = marginTop || 0;
parent.appendChild(canv);
ctx = canv.getContext('2d');
// Полёт
var PI = Math.PI;
ctx.beginPath();
circle = {
centerX: 25,
centerY: 25,
radius: 15,
startingAngle: 5.6*PI,
endingAngle: 5.8*PI,
counterclockwise: false
};
var hue = 0;
var hue = hue + 10 * Math.random();
ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)';
ctx.shadowColor = '#77ff77';
ctx.shadowBlur = 3;
ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise);
ctx.lineWidth = 7;
ctx.strokeStyle = "#77ff77"; // line color
ctx.stroke();
var i=1;
var intervalFly = window.setInterval(function(){
canv.style.marginLeft = i;
canv.style.marginTop = i;
i=i+1;
}, 15);
// Запуск червя
var worm = this;
window.setTimeout(function(){
window.clearInterval(intervalFly);
var i=0;
ctx.clearRect(0,0,50,50);
ctx.beginPath();
worm.downWorm();
canv.style.marginTop = 12;
inter = window.setInterval(function(){
if(i==0) {
i=5;
}
ctx.clearRect(0,0,50,50);
canv.style.marginLeft = i*10;
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "#77ff77"; // line color
ctx.shadowColor = '#77ff77';
ctx.shadowBlur = 2;
if(i%2 ==0)
worm.downWorm();
else
worm.upWorm();
i++;
}, 250);
}, 700);
}
}
var example = document.getElementById("example");
var ctx = example.getContext('2d');
var PI = Math.PI;
var i=0;
var j=0.2;
circleInter = window.setInterval(function(){
ctx.clearRect(0,0,1000,1000);
ctx.beginPath();
// Основа
circle = {
centerX: 25,
centerY: 25,
radius: 15,
startingAngle: 0,
endingAngle: PI*PI,
counterclockwise: false
};
ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise);
ctx.lineWidth = 4;
ctx.strokeStyle = "white"; // line color
ctx.stroke();
// Бегунок
ctx.beginPath();
circle = {
centerX: 25,
centerY: 25,
radius: 15,
startingAngle: i*PI,
endingAngle: j*PI,
counterclockwise: false
};
var hue = hue + 10 * Math.random();
ctx.strokeStyle = 'hsl(' + hue + ', 10%, 10%)';
ctx.shadowColor = 'blue';
ctx.shadowBlur = 7;
ctx.arc(circle.centerX, circle.centerY, circle.radius, circle.startingAngle, circle.endingAngle, circle.counterclockwise);
ctx.lineWidth = 7;
ctx.strokeStyle = "#77ff77"; // line color
ctx.stroke();
//if(i > 2) { i=0; j=0.2;}
i=i+0.01;
j=j+0.01;
if(i>7.5)
{
var worm = new Worm();
worm.startWorm();
}
}, 5);
</script>
</body>
</html>
Исходный код не является образцом красоты, качества и валидности кода, ибо создавался впопыхах.
Всем спасибо за внимание, надеюсь эта статья будет для кого-нибудь полезной.