HTML and CSS Reference
In-Depth Information
context.lineTo(35.8, 174.1);
context.lineTo(46.5, 111.5);
context.lineTo(1.1, 67.2);
context.lineTo(63.9, 58.1);
context.lineTo(92.0, 1.1);
context.closePath();
context.fillStyle = gradient;
context.fill();
context.stroke();
context.restore();
</script>
Even a quick look at the bolded code shows that making a gradient is as simple as calling the
createLinearGradient method on the 2D context object and passing in the correct parameters. Once the gradient
is created, add color stops by calling the method addColorStop and specifying a float offset (0-1) and a color value in
hex format. Thus, you can specify a stop at 0.2, 0.4, 0.8, and so on, to get complete granularity and flexibility. Finally,
adding that new gradient value to the fillStyle of the stars shape produces the output shown in Figure 4-5 .
Figure 4-5. Creating a linear gradient
Images
While it's better to let the canvas element handle graphic compositing in your advertisement, you sometimes can't
get away from using bitmap images, as when you're working with a retail client that wants to show off new products
or with an automotive company that wants to feature the latest model vehicles. With this in mind, let's move into the
realm of working with images on the canvas in HTML5. Working thus, developers can easily paint an image bitmap
onto the canvas (see Listing 4-7).
Listing 4-7. Canvas Bitmap Images
<script type="text/javascript">
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
 
Search WWH ::




Custom Search