HTML and CSS Reference
In-Depth Information
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>
