您的位置：首页 > 其它

canvas_时钟

2016-06-15 20:59 211 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas_时钟</title>
<style>
body{
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="fo" width="400" height="400" style="background: #000">你的浏览器不支持canvas，请您更换浏览器或者升级浏览器版本</canvas>
<script type="text/javascript">
var canvas = document.getElementById('fo');
var cxt = canvas.getContext('2d');
function draw(){
var now = new Date();
var h = now.getHours();
var s = now.getSeconds();
var m = now.getMinutes();
h > 12?h-12:h;
h += (m/60);
//        清空画布
cxt.clearRect(0,0,canvas.width,canvas.height);

//        确定 圆心
cxt.strokeStyle = '#0ff';
cxt.lineWidth = 10;
cxt.beginPath();
cxt.arc(200,200,180,0,360);
cxt.stroke();
cxt.closePath();
//        时刻度
for(var i =0;i<12;i++ ){
cxt.save();
cxt.lineWidth = 7;
　    cxt.strokeStyle = '#ff0';
//        设置原点
cxt.translate(200,200);
//        设置旋转角度
cxt.rotate(30*i*Math.PI/180);// 弧度  角度
　　　　  cxt.beginPath();
cxt.moveTo(0,-155);
cxt.lineTo(0,-175);
cxt.stroke();
cxt.closePath();
cxt.restore();// 把原来状态恢复回来
}
//       分刻度
　　　　  for(var j = 0; j<60;j++){
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = '#ff0';
//       设置原点
cxt.translate(200,200);
//       设置旋转角度
cxt.rotate(6*j*Math.PI/180);// 弧度  角度
cxt.beginPath();
cxt.moveTo(0,-165);
cxt.lineTo(0,-175);
cxt.stroke();
cxt.closePath();
cxt.restore();// 把原来状态恢复回来
}

//       根据当前的小时数、分钟数、秒数分别设置各个针的角度即可
//-----------------------------时针-----------------------------//
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#0ff";
cxt.translate(200, 200);
cxt.rotate(h * 30 * Math.PI / 180);//每小时旋转30度
cxt.beginPath();
cxt.moveTo(0, -80);
cxt.lineTo(0, 15);
cxt.stroke();
cxt.closePath();
cxt.restore();
//-----------------------------分针-----------------------------//
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = '#ff0';
cxt.translate(200,200);
cxt.rotate(m*6*Math.PI/180);//每分钟旋转6度
cxt.beginPath();
cxt.moveTo(0,-120);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restore();
//-----------------------------秒针-----------------------------//
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = '#ff0';
cxt.translate(200,200);
cxt.rotate(s*6*Math.PI/180);//每分钟旋转6度
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
//      美化表盘，画中间的圆
cxt.beginPath();
cxt.arc(0,0,7,0,360);
cxt.fillStyle = '#ff0';
cxt.fill();
cxt.strokeStyle = '#ff0';
cxt.stroke();
cxt.closePath();
//        秒针上的原点
cxt.beginPath();
cxt.arc(0,-140,5,0,360);
cxt.fillStyle = '#ff0';
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
//      显示时间
cxt.font = '18px 微软雅黑';
cxt.lineWidth = 2;
cxt.fillStyle = '#09f';
h = now.getHours();
var str = h>10?h:('0'+h)+':'+(m>10?m:('0'+m));
cxt.fillText(str,160,80);
cxt.font = "16px 宋体";
cxt.lineWidth = 2;
cxt.fillStyle = '#09f';
s = now.getSeconds();
var so = s>10?s:('0'+s);
cxt.fillText(':'+so,205,80);
cxt.font = "16px 宋体";
cxt.lineWidth = 2;
cxt.fillStyle = '#09f';
m = now.getMinutes();
var mo = m>10?m:('0'+m);
cxt.fillText(':'+mo,180,80);
cxt.fillText("Xiao Wu", 170, 100);
}
　　　    draw();
　　　 setInterval(draw, 1000);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航