Tutorial Canvas Animation: gravity

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

HTML code for this animation:

  <!doctype html>
  <html>
  <head>
 	<title>Het Canvas eenparig versnelde beweging</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/service.js"></script>
    <script src="js/ball.js"></script>
    <script src="js/functions.js"></script>
  	</head>
    <script>
  	jQuery(document).ready(function() {
	gravity1();
	});
	</script>
  <body> 
 	 <canvas id="gravitycanvas" style="border: 1px solid;" width="636" height="288">
    Your browser does not support Canvas. Update your browser to the latest version.
    </canvas>
  </body>
  </html>

Javascript code in functions.js

function gravity1(){
  var radius=15;
  var speedfactor = 4;
 // define the direction the ball is moving
  var degrees = 305;
  var angle = degrees * Math.PI/ 180;
  var vx = Math.cos(angle) * speedfactor;
  var vy  = Math.sin(angle) * speedfactor;
  var gravity = .025;
  //var canvas=document.getElementById("gravity_canvas");
  //var context=canvas.getContext("2d");
  var canvas=jQuery("#gravitycanvas");
  var context = canvas.get(0).getContext("2d");
 //Make the Canvas element responsive for desktop, tablet and smartphone
  var parentWidth=jQuery(canvas).parent().width();
  var canvasWidth = context.canvas.width  = parentWidth;
  var canvasHeight = context.canvas.height  = 288;
  
  // define the coordinates of the starting point p0
  // define the start coordinates, the speed and the radius of the ball
  //var ball = {x:p0.x, y:p0.y, vx:vx, vy:vy, radius:radius};
  var ball_7 = new Ball(20,canvasHeight-radius,radius,'#f16529','#000',7);
  ball_7.vx=vx;
  ball_7.vy=vy;
  
  if (!checkForCanvasSupport) {
  return;
  }
  
  (function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0,0, canvasWidth,canvasHeight);
  if (ball_7.y + ball_7.radius <= canvas.height()) {
  ball_7.vy += gravity;
  } else {
  ball_7.vx = 0;
  ball_7.vy = 0;
  ball_7.y = canvas.height() - ball_7.radius;
  }
  
  ball_7.y += ball_7.vy;
  ball_7.x += ball_7.vx;
  ball_7.draw(context);
  }());//einde drawFrame 
}//einde  gravity1

To next tutorial

Leave a comment