A Line of Code "Scribble" Canvas Animation
"Scribble" canvas animation for my experimental code site http://alineofcode.com
HTML
<canvas id="canvas" width="70" height="70">
<img src="http://i.imgur.com/NvPmS0T.jpg" />
</canvas>
CSS
canvas {border:0px solid #ccc;}
JavaScript
// requestAnimationFrame Shim
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Les Variables.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fps = 15;
// Initialize All The Things!
function init() {
draw();
}
// Draw on our canvas.
function draw() {
// To Set A Framerate Using requestAnimationFrame
setTimeout(function() {
ctx.clearRect(0,0,400,300);
requestAnimationFrame(draw);
ctx.beginPath();
ctx.moveTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() * 70, Math.random() * 70);
ctx.lineTo(Math.random() *...