HTML and CSS Reference
In-Depth Information
Move the middle ratio around to see how that affects the gradient. Instead of 0.5, try 0.25 or 0.75.
The next example is a straight alpha blend. The colors are the same; only the alpha changes:
//all black alpha blend
gradient.addColorStop(0, "#000000"); //alpha 100%
gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); //alpha 0%
Finally, instead of using points, define two circles and use a radial gradient:
c1 = {x: 150, y: 150, radius: 0},
c2 = {x: 150, y: 150, radius: 50},
gradient = context.createRadialGradient(c1.x, c1.y, c1.radius,
c2.x, c2.y, c2.radius);
You can try all the same tricks that you used for the linear gradient fill in the radial version. Or, see how
this looks in example 09-gradient-fill-radial.html .
Loading and drawing images
You might want to draw an external image into your animation. There are two ways to access the image:
Load a URL while the script is running or use the DOM interface to access an embedded image element.
After the image has loaded, you can render it to the canvas using the drawing API.
Loading images
To load an image at runtime, create a new Image object and set its src property to the URL path of an
image file. When the image has finished loading, it executes the callback function set as its onload
method. In this simple example, we draw the image to the canvas after it has been completely loaded
(document 10-load-image.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load Image</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'),
image = new Image();
image.src = "picture.jpg";
image.onload = function () {
context.drawImage(image, 0, 0);
};
};
 
Search WWH ::




Custom Search