zoukankan html css js c++ java

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>

查看全文

相关阅读:
oralce索引的使用
 oracle中connect by prior的使用
 oracle函数listagg使用
 oracle函数的使用
 redis高可用集群搭建
 Node.js安装及环境配置之Windows篇
 Repeater 合并单元格
 c#16进制转浮点数单精度类型
 EF Core 实体映射表或视图
 docker 构建filebeat镜像

原文地址：https://www.cnblogs.com/feimeng0530/p/3907109.html

HTML5初学一 随机的骰子

HTML5初学一随机的骰子