这次跟大家分享的是一个用canvas写的简易时钟,话不多说,直接上效果图:
下面是具体的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#clock{
width: 500px;
height: 500px;
margin: 100px auto 0;
}
#cvs{
border: 1px solid chocolate;
}
</style>
</head>
<body>
<div id="clock">
<canvas id="cvs" width="500" height="500"></canvas>
</div>
</body>
<script type="text/javascript">
var cvs = document.getElementById("cvs")
var ctx = cvs.getContext('2d')
function click(){
//时钟圆盘
ctx.beginPath()
ctx.strokeStyle ='red'
ctx.lineWidth = 8
ctx.arc(250,250,200,0,2*Math.PI,true)
ctx.closePath()
ctx.stroke()
ctx.globalCompositeOperation='destination-over'
//时刻度
for(var i=0;i<12;i++){
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.strokeStyle ='#00D6B2';
ctx.lineWidth=6;
ctx.moveTo(0,-175);
ctx.lineTo(0,-200);
ctx.stroke()
ctx.closePath();
ctx.restore()
};
//分刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.strokeStyle ='#FEF319';
ctx.lineWidth=4;
ctx.moveTo(0,-185);
ctx.lineTo(0,-200);
ctx.stroke()
ctx.closePath();
ctx.restore()
};
//画小时数
var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
hour.forEach(function(num,i){
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * 160;
var y = Math.sin(rad) * 160;
// console.log(x,y)
ctx.font = "18px sans-serif"
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle='#FF0000';
ctx.fill();
ctx.fillText(num, x+250, y+250);
});
//获取当前时间
var oDate = new Date
var hour = oDate.getHours()
var minutes = oDate.getMinutes()
var seconds = oDate.getSeconds()
// console.log(hour,minutes,seconds)
if(hour>12){
hour = hour-12;
hour = hour+minutes/60;
}
minutes = minutes + seconds/60;
//console.log(hour,minutes,seconds)
//时针
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(hour*30*Math.PI/180);
ctx.strokeStyle ='#F44336';
ctx.lineWidth=9;
ctx.moveTo(0,15);
ctx.lineTo(0,-90);
ctx.stroke()
ctx.closePath();
ctx.restore()
//
//分针
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(minutes*6*Math.PI/180);
ctx.strokeStyle ='#A2D866';
ctx.lineWidth=6;
ctx.moveTo(0,20);
ctx.lineTo(0,-130);
ctx.stroke()
ctx.closePath();
ctx.restore()
//秒针
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(seconds*6*Math.PI/180);
ctx.strokeStyle ='#F0AD4E';
ctx.lineWidth=3;
ctx.moveTo(0,25);
ctx.lineTo(0,-150);
ctx.stroke()
ctx.closePath();
ctx.restore()
ctx.globalCompositeOperation='source-over'
//中心圆
ctx.beginPath()
ctx.fillStyle='#60D9F8';
ctx.strokeStyle='#00B7FF';
ctx.lineWidth = 3;
ctx.arc(250,250,8,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//画时间
var h2=oDate.getHours();
var m2=oDate.getMinutes();
var str1=h2>9?h2:('0'+h2);
var str2=m2>9?m2:('0'+m2);
ctx.beginPath();
ctx.fillStyle='#FB1F11';
ctx.font='26px 微软雅黑';
ctx.fillText(str1+':'+str2,250,340);
ctx.closePath();
}
setInterval(function(){
ctx.clearRect(0,0,cvs.width,cvs.height)
click()
},1000)
</script>
</html>
好了,到此为止,上面效果图的时钟就实现了,是不是很简单呢?