HTML and CSS Reference
In-Depth Information
ship.x += ship.velocityx;
ship.y += ship.velocityy;
//Draw points to illustrate path
points.push({x:ship.x,y:ship.y});
for (var i = 0; i< points.length; i++) {
context.drawImage(pointImage, points[i].x+shipImage.width/2, points[i].y,1,1);
}
context.drawImage(shipImage,ship.x,ship.y);
}
var easeValue = .05;
var p1 = {x:240,y:470};
var tempX;
var tempY;
var tempSpeed = .5;
var tempAngle = 270 ;
var tempRadians = tempAngle * Math.PI/ 180;
var tempvelocityx = Math.cos(tempRadians) * tempSpeed;
var tempvelocityy = Math.sin(tempRadians) * tempSpeed;
var ship = {x:p1.x, y:p1.y, velocityx:tempvelocityx, velocityy:tempvelocityy};
var points = new Array();
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
For more information on easing, check out Robert Penner's easing
equations:
http://www.robertpenner.com/easing/
. These equations have
been implemented in jQuery for JavaScript at
http://plugins.jquery.com/
