js代码
function drawCircle(id){
var canvas = document.getElementById(id);
if(canvas == null) return false;
var context = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 1000;
//时钟
context.clearRect(0,0,canvas.width,canvas.height);
var now = new Date();
var hours = now.getHours();
var mins = now.getMinutes();
var sec = now.getSeconds();
context.save();
context.translate(0,500);
context.fillStyle = '#ff0';
context.strokeStyle = '#eee';
context.font = 'bold 35px 微软雅黑';
context.strokeText('系统当前时间为：'+hours+'时'+mins+'分'+sec+'秒',100,100);
context.fillText('系统当前时间为：'+hours+'时'+mins+'分'+sec+'秒',100,100);
context.restore();
//24时转换为12时
hours = hours>12?hours-12:hours;
//画表盘
context.beginPath();
context.lineWidth=10;
context.strokeStyle = '#ff00ff';
context.arc(300,300,200,0,Math.PI*2,false);
context.stroke();
context.closePath();
//画刻度
//时刻度
for(var i=0;i<12;i++){
context.save();
context.translate(300,300);
context.lineWidth = 7;
context.strokeStyle = '#999999';
context.rotate(i*30*Math.PI/180);
context.beginPath();
context.moveTo(0,-170);
context.lineTo(0,-190)
context.stroke();
context.restore();
}
//分刻度
for(var j=0;j<60;j++){
context.save();
context.translate(300,300);
context.lineWidth = 5;
context.strokeStyle = '#999999';
context.rotate(j*6*Math.PI/180);
context.beginPath();
context.moveTo(0,-180);
context.lineTo(0,-190)
context.stroke();
context.restore();
}
//时针
context.save();
context.translate(300,300);
context.lineWidth = 7;
context.strokeStyle = '#000000';
context.rotate((hours+mins/60)*30*Math.PI/180);
context.beginPath();
context.moveTo(0,15);
context.lineTo(0,-110)
context.stroke();
context.closePath();
context.restore();
//分针
context.save();
context.translate(300,300);
context.lineWidth = 5;
context.strokeStyle = '#333333';
context.rotate((mins+sec/60)*Math.PI/30);
context.beginPath();
context.moveTo(0,15);
context.lineTo(0,-130)
context.stroke();
context.closePath();
context.restore();
//秒针
context.save();
context.translate(300,300);
context.lineWidth = 3;
context.strokeStyle = '#dd0000';
context.rotate(sec*Math.PI/30);
context.beginPath();
context.moveTo(0,20);
context.lineTo(0,-145)
context.stroke();
context.closePath();
//圆心
context.lineWidth = 6;
context.fillStyle = '#fefefe';
context.beginPath();
context.arc(0,0,6,0,Math.PI*2,false);
context.stroke();
context.fill();
context.closePath();
//外圆
context.beginPath();
context.arc(0,-125,4,0,Math.PI*2,false);
context.stroke();
context.fill();
context.closePath();
context.restore();
}
drawCircle('cav');
setInterval(function(){
drawCircle('cav');
},1000);
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<canvas id="cav"></canvas>
<script src="index.js"></script>
</html>
效果
