HTML and CSS Reference
In-Depth Information
1. Open the adscript.js file.
2. Create a new variable in your drawAdvert() function called linGrad and initialize it by creating a new
canvasGradient object using the createLinearGradient() function. Set the x1 , y1 , and x2
parameters to 0 and the y2 parameter to 160. This is because your circle is 160 pixels high. Place this code
before the code that you wrote to draw the circle.
function drawAdvert() {
...
// Create a Linear Gradient for the Circle
var linGrad = ctx.createLinearGradient(0,0,0,160);
// Draw the offer circle
...
}
3. Add a color stop at position 0 that uses the color #009A00 .
function drawAdvert() {
...
// Create a Linear Gradient for the Circle
var linGrad = ctx.createLinearGradient(0,0,0,160);
linGrad.addColorStop(0, “#009A00");
// Draw the offer circle
...
}
4. Add another color stop at position 1 that uses the color #085A00 .
function drawAdvert() {
...
// Create a Linear Gradient for the Circle
var linGrad = ctx.createLinearGradient(0,0,0,160);
linGrad.addColorStop(0, “#009A00");
linGrad.addColorStop(1, “#085A00");
// Draw the offer circle
...
}
5. Change the fillStyle property of the circle to use your gradient.
function drawAdvert() {
...
// Create a Linear Gradient for the Circle
var linGrad = ctx.createLinearGradient(0,0,0,160);
linGrad.addColorStop(0, “#009A00");
linGrad.addColorStop(1, “#085A00");
// Draw the offer circle
ctx.beginPath();
ctx.arc(525, 75, 80, 0, Math.PI*2, true);
ctx.fillStyle = linGrad;
ctx.fill() ;
}
6. Save the adscript.js file.
Search WWH ::




Custom Search