标签：canvas dotrad doty dotx ctx js let HTML5 dx
这里共定义了四个函数，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>标签：canvas,dotrad,doty,dotx,ctx,js,let,HTML5,dx 来源： https://blog.csdn.net/MCprogramme/article/details/120874447
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。