How to Make a Simple Html5 Canvas Loader

by admin admin Date: 11-12-2013 html5 web loader coding programming


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);
 
by admin admin Date: 11-12-2013 html5 web loader coding programming hits : 4644  
 
 
 
 

Related Posts