用HTML5绘制骰子

最新推荐文章于 2024-04-30 14:21:47 发布

李永岩

最新推荐文章于 2024-04-30 14:21:47 发布

阅读量5.3k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/jackliyongyan/article/details/9737505

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE thml>
<html>
<head>
<title>Throwing dice</title>
<script type="text/javascript">
var ctx; //保存画布上下文的变量，所有绘制命令中都要用到
var cwidth=400; //保存画布宽度的变量
var cheight=300; //保存画布高度的变量，也用于擦除画布，准备重新绘制
var dicex=50; //保存一个骰子水平位置的变量，也用于擦除画布准备重新绘制
var dicey=50; //保存一个骰子垂直位置的变量
var dicewidth=100; //保存骰子面宽度的变量
var diceheight=100; //保存骰子面高度的变量
var dotrad=6; //保存圆点半径的变量
var dx; //用于水平定位的变量，两个骰子面的水平位置不同
var dy; //用于垂直定位的变量，两个骰子的垂直位置相同

function throwdice(){
//alert("throwdice");
//声明并随机设置ch变量的值为数字1，2，3,4,5,6,
var ch=1+Math.floor(Math.random()*6);
//alert("第一个骰子的点数--->"+ch);
dx= dicex; //设置第一个骰子面的dx
dy= dicey; //设置第一个骰子面的dy
//alert("第一个骰子的dx--》"+dx+"第一个骰子的dy--》"+dy);
drawface(ch);
//调整第二个骰子面的dx
dx=dicex+150;
//alert("第二个骰子的dx---》"+dx);
ch=1+Math.floor(Math.random()*6); //用一个随机值重置ch
//alert("第二个骰子的点数--》"+ch);
drawface(ch);
}
function drawface(n){
//alert("drawface()");
//alert("n--->"+n);
//得到用来画布上的绘图上下文对象
ctx=document.getElementById('canvas').getContext('2d');
//alert('ctx:'+ctx);
//设置线宽为5
ctx.lineWidth=5;
//清除原来绘制骰子的空间，第一次调用时这行代码不会产出任何影响
ctx.clearRect(dx,dy,dicewidth,diceheight);
//画出骰子的轮廊
ctx.strokeRect(dx,dy,dicewidth,diceheight);
//设置圆的颜色
if(n==1){
ctx.fillStyle="red";
}else{
ctx.fillStyle="#009966";
}

//alert("ctx.fillStyle:"+ctx.fillStyle);
//draw1();
//draw2();
//draw4();
//draw2mid();
//开始switch,利用点数判断
switch(n){
case 1:
//alert(n+"点");
draw1();
break;
case 2:
//alert(n+"点");
draw2();
break;
case 3:
//alert(n+"点");
draw2();
draw1();
break;
case 4:
//alert(n+"点");
draw4();
break;
case 5:
//alert(n+"点");
draw4();
draw1();
break;
case 6:
//alert(n+"点");
draw4();
draw2mid();
break;
}
}
function draw1(){
//alert("Draw1");
//保存水平位置的变量，用于绘制单个原点
var dotx;
//保存垂直位置的变量，用于绘制单个原点
var doty;
//alert("dotx--->"+dotx+"doty--->"+doty);
//开始一个路径
ctx.beginPath();
//alert("ctx.beginPath()-->"+ctx.beginPath());
//设置这个圆点的中心在骰子的面水平方向的中心
dotx=dx+.5*dicewidth;
//设置这个圆点的中心在骰子的面垂直方向的中心
doty=dy+.5*diceheight;
//alert("dotx--->"+dotx+"doty--->"+doty);
//构造一个圆（用fill命令绘制）
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
//alert("ctx.arc--->"+ctx.arc());
//结束路径
ctx.closePath();
//绘制路径，也就是填充这个圆
ctx.fill();

}
function draw2(){

//alert("Draw2");
var dotx;
var doty;
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+3*dotrad;
//alert("Draw2()-->dotx--->"+dotx+"doty-->"+doty);
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx=dx+dicewidth-3*dotrad;
doty=dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

}
function draw4(){
//alert("Draw4");
var dotx;
var doty;
//开始路径
ctx.beginPath();
//水平方向上将第一个圆点定位在左上角
dotx=dx+3*dotrad;
//垂直方向上将第一个圆点定位在左上角
doty=dy+3*dotrad;
//alert("dotx-->"+dotx+"doty--->"+doty);
//构造圆点
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
//alert("ctx.arc()");
//水平方向上将第一个圆点定位在右上角
dotx=dx+dicewidth-3*dotrad;
//垂直方向上将第一个圆点定位在右上角
doty=dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
//结束路径
ctx.closePath();
//绘制两个圆点
ctx.fill();

ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);

dotx=dx+dicewidth-3*dotrad;
doty=dy+3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

}
function draw2mid(){
//alert("draw2mid()");
var dotx;
var doty;
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+.5*diceheight;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx=dx+dicewidth-3*dotrad;
doty=dy+.5*diceheight;
//alert("doty-->"+doty);
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}

</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px #CCC solid;">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<button οnclick="throwdice()">Throw dice</button>
</body>
</html>

李永岩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用HTML5绘制骰子

Throwing dicevar ctx; //保存画布上下文的变量，所有绘制命令中都要用到var cwidth=400;//保存画布宽度的变量var cheight=300;//保存画布高度的变量，也用于擦除画布，准备重新绘制var dicex=50; //保存一个骰子水平位置的变量，也用于擦除画布准备重新绘制var dicey=50; //保存一个骰
复制链接

扫一扫