HTML and CSS Reference
In-Depth Information
}
Ball3d.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
As you can see, all this does is add properties for position and velocity on each axis to our ball. In
05-
multi-bounce-3d.html
, we created 50 instances of this new class. Each one now has its own values for
xpos
,
ypos
, and
zpos
, and
vx
,
vy
,
vz
. The
drawFrame
animation loop now iterates twice over each
Ball3d
object, passing it to the
move
and
draw
functions. This code does the same thing to each ball that
the previous example did to just one. Here's the example
05-multi-bounce-3d.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Bounce 3d</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball3d.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
balls = [],
numBalls = 50,
fl = 250,
vpX = canvas.width / 2,
vpY = canvas.height / 2,
top = -100,
bottom = 100,
left = -100,
right = 100,
front = -100,
back = 100;
for (var ball, i = 0; i < numBalls; i++) {
