<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.0.js"></script> <script> var ctx; function init(){ ctx = document.getElementById("canvas").getContext('2d'); ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 5; ctx.strokeRect(0,0,400,300); ctx.fillStyle = "rgb(255,255,0)"; ctx.fillRect(20,20,80,80); ctx.strokeRect(20,20,80,80); var ch = 1 + Math.floor(Math.random()*6); var ch2 = 1 + Math.floor(Math.random()*6); drawdice(ch); drawdice(ch2); document.f.pv.value = ch; document.f.pv2.value = ch2; if(ch>ch2){ $("#ze").val("张三"); }else if(ch==ch2){ $("#ze").val("平局"); }else{ $("#ze").val("李四"); } } function drawdice(n) { ctx.fillStyle = "rgb(255,255,0)"; ctx.fillRect(25,25,70,70); ctx.fillStyle = "rgb(255,0,0)"; ctx.lineWidth = 3; ctx.strokeStyle = "rgb(0,0,0)"; switch(n){ case 1: makepoint(60,60); break; case 2: makepoint(60,45); makepoint(60,75); break; case 3: makepoint(80,40); makepoint(60,60); makepoint(40,80); break; case 4: makepoint(45,45); makepoint(75,45); makepoint(45,75); makepoint(75,75); break; case 5: makepoint(40,40); makepoint(80,40); makepoint(60,60); makepoint(40,80); makepoint(80,80); break; case 6: makepoint(45,35); makepoint(75,35); makepoint(45,60); makepoint(75,60); makepoint(45,85); makepoint(75,85); break; } } function makepoint(x,y) { ctx.beginPath(); ctx.arc(x,y,8,0,2*Math.PI,true); ctx.fill(); ctx.stroke(); } </script></head><body onload="init();"><canvas id="canvas" width="400" height="300"> 抱歉，你的浏览器不支持HTML5的canvas元素。</canvas><form name="f"> 张三的骰子:<input type="text" name="pv" value=" "/><br> 李四的骰子:<input type="text" name="pv2" value=" "/><br> 获胜者:<input type="text" name="pv3" value=" " id="ze"/> <br> <input type="submit" value="扔骰子"/> <input type="reset" value="重置"/></form></body></html>
