reneras · July 13, 2012 11:02 · euskadi31 · Mar 13, 2013 · dgmike · Oct 17, 2014
diff --git a/spin.js b/spin.js
 /*
 *  <html>
 *   <head>
 *   </head>
 *   <body>
 *     <canvas id="demo" height="400" width="400" style="background:#000;"></div>
 *   </body>
 *  </html>
 *
 */

 var canvas = document.getElementById('demo');
 var context = canvas.getContext('2d');
 var start = new Date();
 var lines = 16,
    cW = context.canvas.width,
    cH = context.canvas.height;

 var draw = function() {
    var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
    context.save();
    context.clearRect(0, 0, cW, cH);
    context.translate(cW / 2, cH / 2);
    context.rotate(Math.PI * 2 * rotation);
    for (var i = 0; i < lines; i++) {

        context.beginPath();
        context.rotate(Math.PI * 2 / lines);
        context.moveTo(cW / 10, 0);
        context.lineTo(cW / 4, 0);
        context.lineWidth = cW / 30;
        context.strokeStyle = "rgba(255,255,255," + i / lines + ")";
        context.stroke();
    }
    context.restore();
 };
 window.setInterval(draw, 1000 / 30);
	/*
	* <html>
	* <head>
	* </head>
	* <body>
	* <canvas id="demo" height="400" width="400" style="background:#000;"></div>
	* </body>
	* </html>
	*
	*/

	var canvas = document.getElementById('demo');
	var context = canvas.getContext('2d');
	var start = new Date();
	var lines = 16,
	cW = context.canvas.width,
	cH = context.canvas.height;

	var draw = function() {
	var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
	context.save();
	context.clearRect(0, 0, cW, cH);
	context.translate(cW / 2, cH / 2);
	context.rotate(Math.PI * 2 * rotation);
	for (var i = 0; i < lines; i++) {

	context.beginPath();
	context.rotate(Math.PI * 2 / lines);
	context.moveTo(cW / 10, 0);
	context.lineTo(cW / 4, 0);
	context.lineWidth = cW / 30;
	context.strokeStyle = "rgba(255,255,255," + i / lines + ")";
	context.stroke();
	}
	context.restore();
	};
	window.setInterval(draw, 1000 / 30);