您的位置：首页 > 其它

canvas简单时钟

2013-11-08 09:26 337 查看

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0}
#can{ background:#EBEBEB}

</style>

</head>
<body>
<canvas id="can" width="800" height="600"></canvas>

</body>

<script>

var canid=document.getElementById("can");
var can=canid.getContext("2d");
var radius=100;
var crad=10;

setInterval("drawB()",1000);

function  drawB(){
can.clearRect(0,0,800,600);
//画表盘
can.beginPath();
can.strokeStyle="#000000";
can.lineWidth="3";
can.arc(300,300,radius,0,Math.PI*2,true);
can.stroke();
//画中心园
can.beginPath();
can.fillStyle="#000000";
can.arc(300,300,5,0,Math.PI*2,true);
can.fill();
can.stroke();

var date=new Date;
var h=date.getHours()*30+(date.getMinutes()*6/12)-90;
var m=date.getMinutes()*6-90;
var s=date.getSeconds()*6-90;

//画表针

drawBz(s,80,"#cc0000",2); //秒针
drawBz(m,60,"#000000",3); //分针
drawBz(h,50,"#000000",4); //时针

function  drawBz(ds,x,col,cx){

can.beginPath();
can.lineWidth=cx;
can.strokeStyle=col;
var Xtusr=Math.cos(ds*Math.PI/180)*(x)+300;
var Ytusr=Math.sin(ds*Math.PI/180)*(x)+300;
can.moveTo(300,300);
can.lineTo(Xtusr,Ytusr);
can.stroke();
can.closePath();

}

//画刻度
for(var i=0;i<60;i++){
drawKd(i,5);
}

function  drawKd(d,c){
var ds=d*6*Math.PI/180;
if(d%5==0){
c=10;
}
can.beginPath();
can.lineWidth="3";
can.strokeStyle="#000000";
var Xtus=Math.cos(ds)*radius+300;
var Ytus=Math.sin(ds)*radius+300;
var Xtusr=Math.cos(ds)*(radius-c)+300;
var Ytusr=Math.sin(ds)*(radius-c)+300;
can.moveTo(Xtus,Ytus);
can.lineTo(Xtusr,Ytusr);
can.stroke();
can.closePath();

}

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航