Instantly share code, notes, and snippets.

Embed
What would you like to do?
Parallax scrolling
window.onload = init;
function init(){
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');
var elapsed = 0;
var start = new Date();
var last = new Date();
var angle = 0;
var radius = 50;
var loop = function(){
var now = new Date();
var dt = now - last;
elapsed +=dt;
last = now;
ctx.fillStyle = '#E6E6E6';
ctx.fillRect(0,0, canvas.width, canvas.height);
if(elapsed > 10){
angle+=1
if(angle > 360) angle = 0;
elapsed = 0;
}
var _angle = angle * Math.PI / 180 - Math.PI/2;
x = Math.cos(_angle)*radius + canvas.width/2;
y = Math.sin(_angle)*radius + canvas.height/2;
ctx.fillStyle = 'red';
ctx.fillRect(x-120, y-120, 240, 240);
ctx.fillStyle = 'yellow';
ctx.fillRect(canvas.width/2 - 20, canvas.height/2 -40, 40,80);
ctx.fillStyle = '#FF0000';
ctx.beginPath();
ctx.moveTo(canvas.width/2, canvas.height/2);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
};
setInterval(loop, 1000/60);
}
@omaraboumrad

This comment has been minimized.

Owner

omaraboumrad commented Oct 19, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment