html5 canvas掷骰子（简单，学习基础canvas）_H5之家

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>置骰子游戏</title> <style type="text/css"> </style> </head> <body> <script> var cwidth = 400; //保存画布宽度和高度，用于擦除用 var cheight = 300; // //骰子的位置和大小 var diceX = 50; var diceY = 50; var diceWidth = 100; var diceHeight = 100; var diceXoff = diceWidth + 20; //第二个骰子偏移量 var dotrad = 6; //骰子中原点的半径 var ctx; //初始化 function init() { ctx = document.getElementById("canvas").getContext("2d"); var ch = 1+Math.floor(Math.random()*6); //drawFace(ch); } //根据点数画骰子 function drawFace(ch) { // ctx.lineWidth = 5; ctx.clearRect(diceX, diceY, diceWidth, diceHeight); ctx.strokeRect(diceX, diceY, diceWidth, diceHeight); ctx.fillStyle = "#009966"; //注意绘制的算法 switch (ch) { case 1 : draw1(); break; case 2 : draw2(); break; case 3 : draw1(); draw2(); break; case 4 : draw4(); break; case 5 : draw4(); draw1(); break; case 6 : draw4(); draw2middle(); break; } } function draw1() { ctx.beginPath(); var thex = diceX + 0.5*diceWidth; var they = diceY + 0.5*diceHeight; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); } function draw2() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); //第二个点 thex = diceX + diceWidth - 18; they = diceY + diceHeight - 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); } function draw4() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); //第二个点 thex = diceX + diceWidth - 18; they = diceY + diceHeight - 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); //重新绘制，防止fill成块 ctx.beginPath(); //第三个点 thex = diceX + 18; they = diceY + diceHeight - 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); //第四个点 thex = diceX + diceWidth - 18; they = diceY + 18; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); } function draw2middle() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 0.5*diceHeight; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); //第二个点 thex = diceX + diceWidth - 18; they = diceY + 0.5*diceHeight; ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); } //置骰子，一个 function throwDice() { diceX = 50; diceY = 50; //考虑清空之前2个骰子的绘画内容 ctx.clearRect(diceX, diceY, diceWidth, diceHeight); ctx.clearRect(diceX+diceXoff, diceY, diceWidth, diceHeight); var ch = 1+Math.floor(Math.random()*6); document.getElementById("divNumber").innerHTML = ""+ch; drawFace(ch); } //两个骰子 function throwDice2() { diceX = 50; diceY = 50; var ch1 = 1+Math.floor(Math.random()*6); var ch2 = 1+Math.floor(Math.random()*6); document.getElementById("divNumber").innerHTML = ""+(ch1+ch2); //第一个 drawFace(ch1); //第二个 diceX = diceX + diceXoff; drawFace(ch2); } </script> <canvas> Your browser dosen't support the HTML5 element canvas. </canvas> <div> <input type="button" value="Throw Dice"/> | <input type="button" value="Throw Two Dice"/> <div>0</div> </div> </body> </html>