deser Jan 27 2012 at 18:10

Создание при помощи HTML5 canvas значка ожидания события

3 min

1.5K

Доброго времени суток! Давно хотел побаловаться с html5 canvas. Когда стал вопрос, что же сделать этакое не слишком трудоемкое и не слишком убогое, решил сделать заменитель иконки ожидания (gif рисунка).

В общем вот что у меня получилось: 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>

Исходный код не является образцом красоты, качества и валидности кода, ибо создавался впопыхах.
Всем спасибо за внимание, надеюсь эта статья будет для кого-нибудь полезной.

Tags:

Hubs:

HTML