首页 > 代码库 > HTML5初学一 随机的骰子
HTML5初学一 随机的骰子
主要是就是在canvas上面画图，没有太多技术含量：
<html><head><script type="text/javascript">var ctx;var firstDicX = 50;var firstDicY = 50;var dicW = 100;var dixH = 100;var secDicX = 200;var secDicY = 200;function init(){ ctx = document.getElementById("canvas").getContext("2d"); //drawRect(); //drawPoint6(); ctx.clearRect(firstDicX,firstDicY,400,300); drawRect(); var p = 1+Math.floor(Math.random()*6); switch(p){ case 1: drawPoint1(); break; case 2: drawPoint2(); break; case 3: drawPoint3(); break; case 4: drawPoint4(); break; case 5: drawPoint5(); break; case 6: drawPoint6(); break; } }function drawPoint1(){ drawPoint(firstDicX+dicW/2,firstDicY+dixH/2,15);}function drawPoint2(){ drawPoint(firstDicX+30,firstDicY+dixH/2,10); drawPoint(firstDicX+70,firstDicY+dixH/2,10);}function drawPoint3(){ drawPoint(75,75,10); drawPoint(100,100,10); drawPoint(125,125,10);}function drawPoint4(){ drawPoint(80,80,10); drawPoint(120,80,10); drawPoint(80,120,10); drawPoint(120,120,10);}function drawPoint5(){ drawPoint(75,75,10); drawPoint(125,75,10); drawPoint(75,125,10); drawPoint(125,125,10); drawPoint(100,100,10);}function drawPoint6(){ drawPoint(70,80,10); drawPoint(100,80,10); drawPoint(130,80,10); drawPoint(70,120,10); drawPoint(100,120,10); drawPoint(130,120,10);}function drawPoint( x,y,w){ ctx.beginPath(); ctx.strokeSyle="rgb(238,238,238)"; ctx.arc(x,y,w,0,2*Math.PI,false); ctx.closePath(); ctx.stroke(); ctx.fillStyle="rgb(255,0,0)"; ctx.fill();}function drawRect(){ ctx.lineWidth=2; ctx.beginPath(); ctx.strokeSyle="rgb(238,238,238)"; ctx.strokeRect(firstDicX,firstDicY,dicW,dixH); ctx.closePath(); ctx.stroke(); }</script></head><body onLoad="init();"><center><canvas id="canvas" width="400" height="300">Your browser dosen‘t support the HTML5 element vancas.</canvas></br><input type="button" value="Run" onclick="init();"/></center></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。