HTML and CSS Reference
In-Depth Information
context.fillStyle = "#000000";
context.beginPath();
context.arc(x, y, 2, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
}
};
</script>
</body>
</html>
This gives you a picture like the one in Figure 19-5.
Figure 19-5.
Circular random distribution
This is more natural looking for explosions; however, you might notice that the dots seem to be more
clumped around the center of the circle. This is because an even distribution exists along the radius,
meaning there are as many dots in the center as near the edge. But because the center has less area,
they are more crowded.
We can make the dots appear more uniformly distributed throughout the circle, as you can see in example
06-random-4.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
numDots = 300,
maxRadius = 50;
while (numDots--) {
var radius = Math.sqrt(Math.random()) * maxRadius,
