1、这里的话我直接给大家代码吧！<!DOCTYPE HTML><head><title>this is a dice game!!!</title><style>.btn-cls{position:absolute;top:400px;left:250px;}
2、</style></head><body><canvas id="canvas" width="600" height="600">your browser doesn't support the HTML5 element canvas.</canvas>
3、<button id="btn" class="btn-cls" onclick="Throw()" >开始投掷</button><script>var ctx; // canvas上下文var point1,point2;ctx = document.getElementById('canvas').getContext('2d');// 绘制画布ctx.strokeRect(0,0,600,600);
4、// 绘制两个骰子ctx.strokeRect(100,100,150,150);ctx.strokeRect(350,100,150,150);function Throw(){ // 投掷按钮point1 = Math.ceil(Math.random() * 6);point2 = Math.ceil(Math.random() * 6);DrawPoint(point1,point2);}
5、function DrawPoint(drawPoint1,drawPoint2){ // 绘制骰子上面的点ctx.clearRect(110,110,130,130);ctx.beginPath();ctx.arc(135,215,5,0,2 * Math.PI);ctx.arc(215,215,5,0,2 * Math.PI);ctx.arc(215,135,5,0,2 * Math.PI);ctx.fillStyle = "block";ctx.closePath();ctx.fill();}</script>
