The Essential Guide to HTML5

(Greg DeLong) #1

HANGMAN


Code Explanation


drawrightleg, Draws the right leg


drawleftleg, Draws the left leg


drawnoose Draws the noose


]; Ends the array steps


var cur = 0; Points to the next drawing in steps


function drawgallows() { Header for the function drawing the gallows


ctx.lineWidth = 8; Sets the line width


ctx.strokeStyle = gallowscolor; Sets the color


ctx.beginPath(); Begins the drawing path


ctx.moveTo(2,180); Moves to the first position


ctx.lineTo(40,180); Draws a line


ctx.moveTo(20,180); Moves to the next position


ctx.lineTo(20,40); Draws a line


ctx.moveTo(2,40); Moves to the next position


ctx.lineTo(80,40); Draws the line


ctx.stroke(); Actually draws the whole path


ctx.closePath(); Closes the path


} Closes the function


function drawhead() { Header for the function drawing the head of
the victim


ctx.lineWidth = 3; Sets the line width


ctx.strokeStyle = facecolor; Sets the color

Free download pdf