Math, Physics, and Animation - HTML5 Canvas - page 314

return return Modernizr . canvas ;

}

function function canvasApp () {

iif ( ! canvasSupport ()) {
return

return ;

}

var new Image ();

pointImage . src = "point.png" ;

var pointImage = new

function function drawScreen () {

context . fillStyle = '#EEEEEE' ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );
//Box
context . strokeStyle = '#000000' ;
context . strokeRect ( 1 , 1 , theCanvas . width - 2 , theCanvas . height - 2 );

ball . x += xunits ;
ball . y += yunits ;

//Draw points to illustrate path

points . push ({ x : ball . x , y : ball . y });

for for ( var var i = 0 ; i < points . length ; i ++ ) {

context . drawImage ( pointImage , points [ i ]. x , points [ i ]. y , 1 , 1 );

}

context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , 15 , 0 , Math . PI * 2 , true true );

context . closePath ();
context . fill ();

} var var speed = 5 ;

var var p1 = { x : 20 , y : 20 };

var var angle = 45 ;

var

var radians = angle * Math . PI / 180 ;
var var xunits = Math . cos ( radians ) * speed ;

var

var yunits = Math . sin ( radians ) * speed ;
var var ball = { x : p1 . x , y : p1 . y };

var var points = new new Array ();