CANNONBALL AND SL INGSHOT
The next statement, declaring the variable cball, builds a new object of type Ball by using the operator
new and the function Ball. The parameters to the function are based on set values for the cannon
because I want the ball to appear at the mouth of the cannon to start out.var cball = new
Ball(cannonx+cannonlength,cannony+cannonht*.5,ballrad,"rgb(250,0,0)");The Picture, Myrectangle, and Slingshot functions are similar and will be explained below. They each
specify a draw method. For this application, I only use moveit for cball, but I defined moveit for the
other objects just in case I later want to build on this application. The variables cannon and ground will be
set to hold a new Myrectangle, and the variables target and htarget will be set to hold a new Picture.Tip: Names made up by programmers are arbitrary, but its a good idea to be consistent in both
spelling and case. HTML5 appears to disregard case, in contrast to a version of HTML called
XHTML. Many languages treat upper- and lowercase as different letters. I generally use lowercase,
but I capitalized the first letter of Ball, Picture, Slingshot, and Myrectangle because the convention is
that functions intended to be constructors of objects should start with capital letters.Each of the variables will be added to the everything array using the array method push, which adds a
new element to the end of the array.Rotations and translations for drawing
HTML5 lets us translate and rotate drawings. Take a look at the following code. I urge you to create this
example and then experiment with it to improve your understanding. The code draws a large red rectangle
on the canvas with the upper corner at (50,50) and a tiny blue, square on top of it.<html>
<head>
<title>Rectangle</title>
<script type="text/javascript">
var ctx;
function init(){
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "rgb(250,0,0)";
ctx.fillRect(50,50,100,200);
ctx.fillStyle = "rgb(0,0,250)";
ctx.fillRect(50,50,5,5);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>