html5 canvas掷骰子(简单,学习基础canvas)

html5 canvas掷骰子(简单,学习基础canvas),第1张

概述html5 canvas掷骰子(简单,学习基础canvas)

下面是内存溢出 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)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1091075.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存