下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML><HTML><head> <Meta http-equiv="content-type" content="text/HTML; charset=UTF-8" /> <Title>置骰子游戏</Title> <style type="text/CSS"> </style></head><body onload="init()"><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.@R_403_4123@ = 5; ctx.clearRect(diceX,diceY,diceWIDth,diceHeight); ctx.strokeRect(diceX,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,2*Math.PI,true); ctx.closePath(); ctx.fill(); } function draw2() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 18; ctx.arc(thex,true); //第二个点 thex = diceX + diceWIDth - 18; they = diceY + diceHeight - 18; ctx.arc(thex,true); ctx.closePath(); ctx.fill(); } function draw4() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 18; ctx.arc(thex,true); ctx.closePath(); ctx.fill(); //重新绘制,防止fill成块 ctx.beginPath(); //第三个点 thex = diceX + 18; they = diceY + diceHeight - 18; ctx.arc(thex,true); //第四个点 thex = diceX + diceWIDth - 18; they = diceY + 18; ctx.arc(thex,true); ctx.closePath(); ctx.fill(); } function draw2mIDdle() { ctx.beginPath(); //第一个点 var thex = diceX + 18; var they = diceY + 0.5*diceHeight; ctx.arc(thex,true); //第二个点 thex = diceX + diceWIDth - 18; they = diceY + 0.5*diceHeight; ctx.arc(thex,true); ctx.closePath(); ctx.fill(); } //置骰子,一个 function throwDice() { diceX = 50; diceY = 50; //考虑清空之前2个骰子的绘画内容 ctx.clearRect(diceX,diceHeight); ctx.clearRect(diceX+diceXoff,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 ID="canvas" wIDth="400" height="300"> Your browser dosen't support the HTML5 element canvas.</canvas><div> <input type="button" onclick="throwDice();" value="Throw Dice"/> | <input type="button" onclick="throwDice2();" value="Throw Two Dice"/> <div ID="divNumber">0</div></div></body></HTML>
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的html5 canvas掷骰子(简单,学习基础canvas)全部内容,希望文章能够帮你解决html5 canvas掷骰子(简单,学习基础canvas)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)