Playing around with HTML5 Canvas animations

index.html 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Stuff</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
  8. <!-- 3rd party CSS -->
  9. <link rel="stylesheet" href="css/normalize.css">
  10. <!-- Fix IE -->
  11. <!--[if lt IE 9]>
  12. <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
  13. <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
  14. <![endif]-->
  15. <!-- Custom CSS -->
  16. <link rel="stylesheet" href="css/main.css">
  17. <!-- Favicon -->
  18. <link rel="shortcut icon" href="/favicon.png" />
  19. <!-- Scripts -->
  20. <script src="js/AnimationFrame.min.js"></script>
  21. <script async src="js/stuff.js"></script>
  22. <!-- Google Analytics -->
  23. <script>
  24. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  25. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  26. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  27. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  28. ga('create', 'UA-39880341-1', 'auto');
  29. ga('send', 'pageview');
  30. </script>
  31. <!-- End Google Analytics -->
  32. </head>
  33. <body>
  34. <canvas id="magic"></canvas>
  35. <div class="container">
  36. </div>
  37. </body>
  38. <script>
  39. window.onload = function () {
  40. new Stuff().draw();
  41. }
  42. </script>
  43. </html>