<!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>
浙公网安备 33010602011771号