主要是就是在canvas上面画图，没有太多技术含量：
<html> <head> <script type="text/javascript"> var ctx; var firstDicX = 50; var firstDicY = 50; var dicW = 100; var dixH = 100; var secDicX = 200; var secDicY = 200; function init(){ ctx = document.getElementById("canvas").getContext("2d"); //drawRect(); //drawPoint6(); ctx.clearRect(firstDicX,firstDicY,400,300); drawRect(); var p = 1+Math.floor(Math.random()*6); switch(p){ case 1: drawPoint1(); break; case 2: drawPoint2(); break; case 3: drawPoint3(); break; case 4: drawPoint4(); break; case 5: drawPoint5(); break; case 6: drawPoint6(); break; } } function drawPoint1(){ drawPoint(firstDicX+dicW/2,firstDicY+dixH/2,15); } function drawPoint2(){ drawPoint(firstDicX+30,firstDicY+dixH/2,10); drawPoint(firstDicX+70,firstDicY+dixH/2,10); } function drawPoint3(){ drawPoint(75,75,10); drawPoint(100,100,10); drawPoint(125,125,10); } function drawPoint4(){ drawPoint(80,80,10); drawPoint(120,80,10); drawPoint(80,120,10); drawPoint(120,120,10); } function drawPoint5(){ drawPoint(75,75,10); drawPoint(125,75,10); drawPoint(75,125,10); drawPoint(125,125,10); drawPoint(100,100,10); } function drawPoint6(){ drawPoint(70,80,10); drawPoint(100,80,10); drawPoint(130,80,10); drawPoint(70,120,10); drawPoint(100,120,10); drawPoint(130,120,10); } function drawPoint( x,y,w){ ctx.beginPath(); ctx.strokeSyle="rgb(238,238,238)"; ctx.arc(x,y,w,0,2*Math.PI,false); ctx.closePath(); ctx.stroke(); ctx.fillStyle="rgb(255,0,0)"; ctx.fill(); } function drawRect(){ ctx.lineWidth=2; ctx.beginPath(); ctx.strokeSyle="rgb(238,238,238)"; ctx.strokeRect(firstDicX,firstDicY,dicW,dixH); ctx.closePath(); ctx.stroke(); } </script> </head> <body onLoad="init();"> <center> <canvas id="canvas" width="400" height="300"> Your browser dosen‘t support the HTML5 element vancas. </canvas> </br> <input type="button" value="Run" onclick="init();"/> </center> </body> </html>
原文：http://www.cnblogs.com/feimeng0530/p/3907109.html