这里共定义了四个函数，draw1，draw2，draw4，draw2mid,其中的3个点的面用draw1和draw2组合，五个点的面有draw1和draw4，六个点的面用draw4和draw2。
这个例子也是在书上看到的，只是看了一眼就着手做了，做完后觉得挺简单的很容易明白，或许对于canvas的理解和使用有一定的帮助
<body>
<canvas id="canvas" width="400" height="300">
your browser doesn`t support the HTML5 element canvas.
</canvas>
<button>开始游戏</button>
</body>
<script>
let buttonNode = document.querySelector("button");
let timer = null;
let cwidth = 400;
let cheight = 300;
//存放画布的宽高
let dicex = 50;
let dicey = 50;
//骰子的位置
let diceWidth = 100;
let diceHeight = 100;
//骰子的大小
let dotrad = 6;
//骰子中圆点的半径
let ctx;
//存储画笔
let dx;
let dy;
//有两个骰子dx，dy定义每个骰子的位置
buttonNode.addEventListener("click",runing);
function runing(){
if(timer){
clearInterval(timer);
timer=null;
buttonNode.innerHTML = "点击开始";
}else{
timer = setInterval(throwdice,200);
buttonNode.innerHTML = "点击暂停";
};
};
function throwdice(){
let ch = 1+Math.floor(Math.random()*6);
dx = dicex;
dy = dicey;
drawface(ch);
dx = dicex + 150;
ch = 1 + Math.floor(Math.random()*6);
drawface(ch);
};
function drawface(n){
ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 5;
ctx.clearRect(dx,dy,diceWidth,diceHeight);
ctx.strokeRect(dx,dy,diceWidth,diceHeight);
let dotx;
let doty;
ctx.fillStyle = "#009966";
switch (n) {
case 1:
draw1();
break;
case 2:
draw2();
break;
case 3:
draw2();
draw1();
break;
case 4:
draw4();
break;
case 5:
draw1();
draw4();
break;
case 6:
draw4();
draw2mid();
break;
};
}
function draw1(){
let dotx;
let doty;
ctx.beginPath();
dotx = dx + 0.5*diceWidth;
doty = dy + 0.5*diceHeight;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//中间
ctx.closePath();
ctx.fill();
};
function draw2(){
let dotx;
let doty;
ctx.beginPath();
dotx = dx + 3*dotrad;
doty = dy + 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//左上
ctx.closePath();
ctx.fill();
ctx.beginPath();
dotx = dx + diceWidth - 3*dotrad;
doty = dy + diceHeight - 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//右下
ctx.closePath();
ctx.fill();
};
function draw4(){
let dotx;
let doty;
ctx.beginPath();
dotx = dx + 3*dotrad;
doty = dy + 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//左上
dotx = dx + diceWidth - 3*dotrad;
doty = dy + diceHeight - 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//右下
ctx.closePath();
ctx.fill();
ctx.beginPath();
dotx = dx + 3*dotrad;
doty = dy + diceHeight -3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//坐下
dotx = dx + diceWidth - 3*dotrad;
doty = dy + 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//右上
ctx.closePath();
ctx.fill();
};
function draw2mid(){
let dotx;
let doty;
ctx.beginPath();
dotx = dx + 3*dotrad;
doty = dy + 0.5*diceHeight;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//左中
dotx = dx + diceWidth - 3*dotrad;
doty = dy +0.5*diceHeight;
ctx.arc(dotx,doty,dotrad,0,2*Math.PI,true);
//右中
ctx.closePath();
ctx.fill();
};
</script>