HTML and CSS Reference
In-Depth Information
See Figure 3.36 for an example image.
As with the linear gradient, the radial gradient is painted onto
an image and the gradient must be constructed of at least two
colors. As with SVG, the radial gradients require starting and stop-
ping radius definitions, size, and position. The following creates a
radial gradient called
myRadialGradient
with three colors: red,
yellow, and blue.
Figure 3.36
Linear gradients can
be applied to CANVAS images.
var myRadialGradient = myCircle.
createRadialGradient(0,150,150,0,140,90);
myRadialGradient.addColorStop(0, 'red');
myRadialGradient.addColorStop(0.9, 'yellow');
myRadialGradient.addColorStop(1, 'blue');
You need to add the gradient to your CANVAS description, as
follows. See also Figure 3.37.
<html>
<head>
<title>A canvas radialGradient example</title>
<script type=”application/x-javascript”>
function draw() {
var myCircle = document.getElementById
('myCanvas').getContext('2d');
var myRadialGradient = myCircle.
createRadialGradient(0,150,150,0,140,90);
myRadialGradient.addColorStop(0, 'red');
myRadialGradient.addColorStop(0.9, 'yellow');
myRadialGradient.addColorStop(1, 'blue');
myCircle.fillStyle = myRadialGradient;
myCircle.fillRect(0,0,450,450);
Figure 3.37
A radial gradient
applied to a CANVAS image.
}
</script>
</head>
<body onload=”draw();”>
<canvas id=”myCanvas” width=”500” height=”500”>
</canvas>
</body>
</html>
Gradients are useful for creating depth on an object. Careful
use of gradients can simulate a 3D environment.
Adding Animation to CANVAS Images
Animation can be added to CANVAS images. As you can imag-
ine, animation requires additional work. To make your life easier
there is a great JavaScript library called CAKE (Canvas Animation
