[html5]练习canvas 扔骰子

找了个扔骰子的例子，联系一下canvas

1.随机数

　　Math.random()------------------返回介于 0（包含） ~ 1（不包含）之间的一个随机数

　　Math.floor()---------------------取地板

　　随机生成1到6之间的数字

 1 + Math.floor(Math.random()*6);

2.画图代码

　　1)取得画布的上下文
　　ctx = document.getElementById('canvas').getContext('2d');

　　2）先清除矩形，再绘制矩形

　　ctx.clearRect(dx,dy,dicewidth,diceheight);
　 ctx.strokeRect(dx,dy,dicewidth,diceheight);

　　　　dx,dy左上角坐标

　　　　dicewidth，diceheight矩形的宽高

　　ctx.fillStyle = "#009966";

　　　　设置填充的样式

　　3）开始画圆点

　　   ctx.beginPath();//开始一条路径，或重置当前的路径。
   　　dotx = dx + dicewidth/2;
   　　doty = dy + diceheight/2;
   　　ctx.arc(dotx,doty,dotrad,0,Math.PI*2);//圆数据配置

　　　　dotx,doty：圆心坐标

　　　　dotrad：半径

　　　　0,Math.PI*2：从0度开始画，到2π停止，默认顺时针

　　ctx.closePath();//创建从当前点到开始点的路径。
　　ctx.fill();//填充

http://www.9lianhuan.cn/2015/07/29/html5%E7%BB%83%E4%B9%A0canvas/