用canvas画动态时钟
HTML代码
<body>
<div class="box">
<span id="hour"></span>:
<span id="minute"></span>:
<span id="second"></span>
</div>
<div>
<canvas id="clock" width="200px" height="200px"></canvas>
</div>
</body>css：
*{margin: 0;padding: 0;}
div{
text-align: center;
}
div.box{
margin: 50px auto;
text-align: center;
font-size: 30px;
display: flex;
align-content: center;
justify-content: center;
}
span{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border:2px solid #ccc;
font-size: 20px;
margin: 0px 20px;
}js代码
var hourspan =document.getElementById("hour");
var minutespan =document.getElementById("minute");
var secondspan =document.getElementById("second");
var dom = document.getElementById("clock");
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width/2;
function drawBackground(){
ctx.save(); //保留当前画布款式
ctx.translate(r,r);//切换中心点
//画外圆
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(0,0,r-5,0,2*Math.PI,false);
ctx.stroke();
//画数字
var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
ctx.textAlign = "center";
ctx.textBaseline = "middle";
hourNumber.forEach(function(item,index){
var rad = 2*Math.PI/12*index;
var x = Math.cos(rad)*(r-30);
var y = Math.sin(rad)*(r-30);
ctx.fillText(item,x,y);
})
//画时候
for(var i=0;i<60;i++){
var rad = 2*Math.PI/60*i;
var x = Math.cos(rad)*(r-15);
var y = Math.sin(rad)*(r-15);
ctx.beginPath();
ctx.arc(x,y,2,0,Math.PI*2,false);
if(i%5 == 0){
ctx.fillStyle = "#000";
ctx.fill();
}else{
ctx.fillStyle = "#ccc";
ctx.fill();
}
}
}
//画时针，分针，秒针
function drawHour(hour,minute,second){
ctx.save();
ctx.beginPath();
var rad = 2*Math.PI/12*hour+((2*Math.PI/12)*(minute+second/60)/60);//将分，秒换算成小时
ctx.rotate(rad);
ctx.strokeStyle = "#000";
ctx.lineWidth = 4;
ctx.lineCap = "round";
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();//返回上一个画布款式
}
function drawMinute(minute,second){
ctx.save();
ctx.beginPath();
var rad = 2*Math.PI/60*minute+(2*Math.PI/60)*(second/60);//将秒换算身分
ctx.rotate(rad);
ctx.strokeStyle = "#000";
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.moveTo(0,15);
ctx.lineTo(0,-(r-25));
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "red";
var rad = 2*Math.PI/60*second;
ctx.rotate(rad);
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.moveTo(0,20);
ctx.lineTo(0,-(r-15));
ctx.stroke();
ctx.restore();
}
//画圆心
function drawCicle(){
ctx.save();
ctx.beginPath();
ctx.fillStyle ="#fff";
ctx.arc(0,0,2,0,Math.PI*2,false);
ctx.fill();
ctx.restore();
}
//将一切事宜封装在一个函数中，为制作成动态时钟做准备
function timeActive(){
ctx.clearRect(0,0,width,height);//清空全部画布
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
hourspan.innerText = hour;
minutespan.innerText = minute;
secondspan.innerText = second;
drawBackground();
drawHour(hour,minute,second);
drawMinute(minute,second);
drawSecond(second);
drawCicle();
ctx.restore();
}
timeActive();//初始化画布
setInterval('timeActive()',1000);小生初出茅庐，愿望列位包涵，瞥见网上的教授教养视频后，觉得挺有意义的，手敲了一遍。
