html canvas 骰子1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>骰子</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script type="text/javascript">
function dice(){
this.ctx=null;
this.cwidth=400;
this.cheight=300;
this.dicex=50;
this.dicey=50;
this.dicewidth=100;
this.diceheight=100;
this.dotrad=6;
}
dice.prototype={
ready:function()
{
var ch=Math.floor(Math.random()*6)+1;
this.drawface(ch);
},
drawface:function(i)
{
this.ctx=document.getElementById("canvas").getContext("2d");
this.ctx.lineWidth=5;
this.ctx.clearRect(this.dicex,this.dicey,this.dicewidth,this.diceheight);
this.ctx.strokeRect(this.dicex,this.dicey,this.dicewidth,this.diceheight);
this.ctx.fillStyle="#000000"
switch(i)
{
case 1:
this.Draw1();
break;
case 2:
this.Draw2();
break;
case 3:
this.Draw1();
this.Draw2();
break;
case 4:
this.Draw4();
break;
case 5:
this.Draw1();
this.Draw4();
break;
case 6:
this.Draw4();
this.Draw6();
break;
}
},
Draw1:function(){
var dotx,doty;
this.ctx.beginPath();
dotx=this.dicex + .5 * this.dicewidth;
doty=this.dicey + .5 * this.diceheight;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill()
},
Draw2:function(){
var dotx,doty;
this.ctx.beginPath();
dotx=this.dicex +3 * this.dotrad;
doty=this.dicey +3 * this.dotrad;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
dotx=this.dicewidth + this.dicex - 3 * this.dotrad;
doty=this.diceheight + this.dicey - 3 * this.dotrad
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill()
},
Draw4:function(){
var dotx,doty;
this.ctx.beginPath();
dotx=this.dicex +3 * this.dotrad;
doty=this.dicey +3 * this.dotrad;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
dotx=this.dicewidth + this.dicex - 3 * this.dotrad;
doty=this.dicey + 3 * this.dotrad;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill();
this.ctx.beginPath();
dotx=this.dicex + 3 * this.dotrad;
doty=this.dicey + this.diceheight - 3 * this.dotrad;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
dotx=this.dicex + this.dicewidth - 3 * this.dotrad;
doty=this.dicey + this.diceheight - 3 * this.dotrad;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill()
},
Draw6:function(){
var dotx,doty;
this.ctx.beginPath();
dotx=this.dicex +3 * this.dotrad;
doty=this.dicey + 0.5 * this.diceheight;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
dotx=this.dicewidth+this.dicex - 3 * this.dotrad;
doty=this.dicey + 0.5 * this.diceheight;
this.ctx.arc(dotx,doty,this.dotrad,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill()
}
}
var c=new dice();
c.ready()
</script>
</body>
</html>
