HTML and CSS Reference
In-Depth Information
Figure 14-8 shows the sector that this code will produce.
Figure 14-8
Drawing a sector of a circle.
Now that you understand how to draw arcs and circles on a canvas, you can continue with your advertisement using
the following steps:
The code in this exercise can be found in folder 7.
1.
Open the
adscript.js
file in your text editor.
2.
Create a new path at the end of your
drawAdvert()
function using the
beginPath()
function.
function drawAdvert() {
...
// Draw the offer circle
ctx.beginPath();
}
3.
Now draw the circle using the
arc()
function. The circle should be positioned to the right of the canvas, so
set the
x
parameter to
525
and the
y
parameter to
75
. You want the circle to be slightly bigger than the
canvas so that the whole of the circle is not showing (refer to Figure 14-1). To do this set, the
radius
to
80
. This will be a complete circle, so set the
startAngle
to
0
and the
endAngle
to
Math.PI*2
. Set
the
anticlockwise
parameter to
true
; however, this doesn't really matter because you are drawing a
full circle.
function drawAdvert() {
...
// Draw the offer circle
ctx.beginPath();
ctx.arc(525, 75, 80, 0, Math.PI*2, true);
}
4.
Set the fill style to be #
009A00
.
function drawAdvert() {
...
// Draw the offer circle
