The Essential Guide to HTML5

(Greg DeLong) #1

CHAPTER 5


} Close for loop

} Close function

function Polycard(sx,sy,rad,n) { Function header for
Polycard

this.sx = sx; Set up the x
coordinate

this.sy = sy; ... the y

this.rad = rad; ...the polygon radius

this.draw = drawpoly; ...how to draw

this.n = n; ...number of sides

this.angle = (2*Math.PI)/n Compute and store
the angle

} Close the function

function drawpoly() { Function header

ctx.fillStyle= frontbgcolor; Set the front
background

ctx.fillRect(this.sx-2*this.rad,this.sy-
2*this.rad,4*this.rad,4*this.rad);

The corner of the
rectangle is up and to
the left of the center
of the polygon

ctx.beginPath(); Start the path

ctx.fillStyle=polycolor; Change to color for
polygon

var i; Index variable

var rad = this.rad; Extract the radius

ctx.moveTo(this.sx+rad*Math.cos(-
.5*this.angle),this.sy+rad*Math.sin(-.5*this.angle));

Move up to the first
point
Free download pdf