| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| |
| |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=620"/> |
| <title>HTML5 Demo: Canvas</title> |
| <!--<link rel="stylesheet" href="/css/html5demos.css" type="text/css">--> |
| </head><body> |
| <section id="wrapper"> |
| <header> |
| <h1>Canvas</h1> |
| </header> |
| <article><canvas width="300" height="100"></canvas></article> |
| <script> |
| |
| buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 }); |
| |
| function buildSpinner(data) { |
| |
| var canvas = document.createElement('canvas'); |
| canvas.height = 100; |
| canvas.width = 300; |
| document.getElementsByTagName('article')[0].appendChild(canvas); |
| var ctx = canvas.getContext("2d"), |
| i = 0, degrees = data.degrees, loops = 0, degreesList = []; |
| |
| for (i = 0; i == degrees; i++) { |
| degreesList.push(i); |
| } |
| |
| // reset |
| i = 0; |
| |
| // so I can kill it later |
| window.canvasTimer = setInterval(draw, 1000/degrees); |
| |
| function reset() { |
| ctx.clearRect(0,0,100,100); // clear canvas |
| |
| var left = degreesList.slice(0, 1); |
| var right = degreesList.slice(1, degreesList.length); |
| degreesList = right.concat(left); |
| } |
| |
| function draw() { |
| var c, s, e; |
| |
| var d = 0; |
| |
| if (i == 0) { |
| reset(); |
| } |
| |
| ctx.save(); |
| |
| d = degreesList[i]; |
| c = Math.floor(255/degrees*i); |
| ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; |
| ctx.lineWidth = data.size; |
| ctx.beginPath(); |
| s = Math.floor(360/degrees*(d)); |
| e = Math.floor(360/degrees*(d+1)) - 1; |
| |
| ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false); |
| ctx.stroke(); |
| |
| ctx.restore(); |
| |
| i++; |
| if (i >= degrees) { |
| i = 0; |
| } |
| } |
| } |
| </script> |
| <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a></footer> |
| </section> |
| <a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0pt; left: 0pt; border: 0pt none;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"/></a> |
| <script> |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); |
| </script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> |
| <script> |
| try { |
| var pageTracker = _gat._getTracker("UA-1656750-18"); |
| pageTracker._trackPageview(); |
| } catch(err) {}</script> |
| </body> |
| </html> |
