HTML5初学一随机的骰子

浏览数：34 / 时间：2015年06月09日

主要是就是在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>