Tutorial Canvas Animation: gravity

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

HTML code for this animation:

  <!doctype html>
 	<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>
  	jQuery(document).ready(function() {
 	 <canvas id="gravitycanvas" style="border: 1px solid;" width="636" height="288">
    Your browser does not support Canvas. Update your browser to the latest version.

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);
  if (!checkForCanvasSupport) {
  (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;
  }());//einde drawFrame 
}//einde  gravity1

To next tutorial

Leave a comment