Skip to content

Instantly share code, notes, and snippets.

@sepulchered

sepulchered/CanvasAnimation.html

Created February 13, 2014 07:21
Show Gist options
  • Save sepulchered/8971152 to your computer and use it in GitHub Desktop.
Save sepulchered/8971152 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Canvas Manipulation
Raw
CanvasAnimation.html
<!doctype html>
<html>
<head>
<title>canv1</title>
</head>
<body>
<canvas id='panel'></canvas>
<script type="text/javascript">
var PANEL = {
currentWidth: 800,
currentHeight: 480,
ratio: 800 / 480,
draw: {
circle: function(x, y, rad, col){
PANEL.ctx.fillStyle = col;
PANEL.ctx.beginPath();
PANEL.ctx.arc(x, y, rad, 0, Math.PI*2, true);
PANEL.ctx.closePath();
PANEL.ctx.fill();
},
clear: function(){
PANEL.ctx.clearRect(0, 0, PANEL.currentWidth, PANEL.currentHeight);
}
},
init: function(){
this.canvas = document.getElementById('panel');
this.ctx = this.canvas.getContext('2d');
this.canvas.width = PANEL.currentWidth;
this.canvas.height = PANEL.currentHeight;
this.step = 0;
this.obj = {x: 20, y: 100, r: 20, col: 'red', vx: 40, vy: 15};
this.animLoop();
},
animLoop: function(){
window.requestAnimFrame(PANEL.animLoop);
PANEL.render();
},
render: function(){
this.step++;
this.draw.clear();
var x = this.obj.x + this.obj.vx * this.step / 15;
var y = this.obj.y - (this.obj.vy * (this.step / 15)) + (9.8 * Math.pow(this.step / 15, 2) / 2);
this.draw.circle(x, y, this.obj.r, this.obj.col);
}
};
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
window.onload = PANEL.init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment