How to Make a Simple Html5 Canvas Loader

Let's code an HTML5 Canvas Loader: 

HTML

1. <canvas id="demo" height="400" width="400" style="background:#000;" />

Js

1. var canvas = document.getElementById('demo');
2. var context = canvas.getContext('2d');
3. var start = new Date();
4. var lines = 16,
5. cW = context.canvas.width,
6. cH = context.canvas.height;
7.  
8. var draw = function() {
9. var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
10. context.save();
11. context.clearRect(0, 0, cW, cH);
12. context.translate(cW / 2, cH / 2);
13. context.rotate(Math.PI * 2 * rotation);
14. for (var i = 0; i < lines; i++) {
15.  
16. context.beginPath();
17. context.rotate(Math.PI * 2 / lines);
18. context.moveTo(cW / 10, 0);
19. context.lineTo(cW / 4, 0);
20. context.lineWidth = cW / 30;
21. context.strokeStyle = "rgba(255,255,255," + i / lines + ")";
22. context.stroke();
23. }
24. context.restore();
25. };
26. window.setInterval(draw, 1000 / 30);

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.