HTML and CSS Reference
In-Depth Information
tree.alpha = scale * 0.7 + 0.3;
This gives the trees an opacity of at least 30%—not quite so foggy. There are no right or wrong values for
most of this, just different values that create different effects.
We left the z-sorting method in there, though, in this particular case, it doesn't make much of a visual
difference because the trees are just simple lines of the same color. If you draw more complex,
overlapping objects, it is pretty important.
Figure 15-7. Watch out for the trees!
Let's add a few enhancements beyond the scope of screen wrapping, just to give you an idea of where this
can go. Here is the result (which can also be found in 09-trees-2.html ):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trees 2</title>
<link rel="stylesheet" href="style.css">
<style>
#canvas {
background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="tree.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
Search WWH ::




Custom Search