html5 筛子,HTML5初学一 随机的骰子

varctx;varfirstDicX= 50;varfirstDicY= 50;vardicW= 100;vardixH= 100;varsecDicX= 200;varsecDicY= 200;functioninit(){

ctx=document.getElementById("canvas").getContext("2d");//drawRect();

//drawPoint6();

ctx.clearRect(firstDicX,firstDicY,400,300);

drawRect();varp= 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;

}

}functiondrawPoint1(){

drawPoint(firstDicX+dicW/2,firstDicY+dixH/2,15);

}functiondrawPoint2(){

drawPoint(firstDicX+30,firstDicY+dixH/2,10);

drawPoint(firstDicX+70,firstDicY+dixH/2,10);

}functiondrawPoint3(){

drawPoint(75,75,10);

drawPoint(100,100,10);

drawPoint(125,125,10);

}functiondrawPoint4(){

drawPoint(80,80,10);

drawPoint(120,80,10);

drawPoint(80,120,10);

drawPoint(120,120,10);

}functiondrawPoint5(){

drawPoint(75,75,10);

drawPoint(125,75,10);

drawPoint(75,125,10);

drawPoint(125,125,10);

drawPoint(100,100,10);

}functiondrawPoint6(){

drawPoint(70,80,10);

drawPoint(100,80,10);

drawPoint(130,80,10);

drawPoint(70,120,10);

drawPoint(100,120,10);

drawPoint(130,120,10);

}functiondrawPoint( 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();

}functiondrawRect(){

ctx.lineWidth=2;

ctx.beginPath();

ctx.strokeSyle="rgb(238,238,238)";

ctx.strokeRect(firstDicX,firstDicY,dicW,dixH);

ctx.closePath();

ctx.stroke();

}

Your browser dosen‘t support the HTML5 element vancas.