Интересный анимированный загрузчик (Preloader) на HTML5 Canvas
|
1 2 3 4 |
#canvas { background-color: #0A0C0D; border-radius: 100%; } |
|
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 31 32 33 34 35 36 37 |
<canvas id="canvas" width="200" height="200"></canvas> <script> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var radius = canvas.width / 3; var angleStep = Math.PI * 2 / 360; var theta = 0; //change frequencies for getting various curves var frequencyX = 5.0; var frequencyY = 5.0; window.requestAnimationFrame(draw); function draw() { context.setTransform(1, 0, 0, 1, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height); context.setTransform(1, 0, 0, 1, canvas.width / 2, canvas.height / 2); context.beginPath(); for (var angle = 0; angle < Math.PI * 2; angle += angleStep) { var x = Math.sin(angle * frequencyX + theta) * Math.cos(angle + theta) * radius; var y = Math.cos(angle * frequencyY) * Math.sin(angle + theta) * radius; if (angle === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } context.lineWidth = 4; context.strokeStyle = '#ffffff'; context.stroke(); context.miterLimit = .1; context.closePath(); theta += 0.04; window.requestAnimationFrame(draw); } }; </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Здравствуйте!
Чтобы Прелоадер стартанул, надо запустить функцию draw();
Её можно вставить на 36-ой строке перед закрывающей фигурной скобкой или на 13-ой строке вместо window.requestAnimationFrame(draw);, которая в этом коде является лишней.