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

2015/10/10 50669
<!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.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 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>
代码片段
