The Essential Guide to HTML5

(Greg DeLong) #1

CHAPTER 2


var ch = 1+Math.floor(Math.
random()*6);


Declare and set the value of the ch variable to
randomly be the number 1, 2, 3, 4, 5, or 6

drawface(ch); Invoke the drawface function with the parameter
ch


} End function definition


function drawface(n) { Start of the function definition for the drawface
function, whose argument is the number of dots


ctx = document.getElementById('canvas').
getContext('2d');


Obtain the object that is used to draw on the
canvas

ctx.lineWidth = 5; Set the line width to 5


ctx.clearRect(dicex,dicey,dicewidth,
diceheight);


Clear the space where the die face may have
been drawn. This has no effect the very first time.

ctx.strokeRect(dicex,dicey,dicewidth,
diceheight)


Draw the outline of the die face

ctx.fillStyle = "#009966"; Set the color for the circles. I used a graphics
program to determine this value. You can do this,
or experiment.


switch(n) { Start switch using the number of dots


case 1: If it is 1


Draw1(); Call the draw1 function


break; Break out of the switch


case 2: If it is 2


Draw2(); Call the draw2 function


break; Break out of the switch


case 3: If it is 3


draw2(); First call draw2 and then


draw1(); Call draw1

Free download pdf