以下是一个通过canvas写的时钟小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浏览器的默认效果*/
*{
margin: 0;
padding: 0;
}
html body{
height: 100%;
overflow:hidden ;
background: pink;
}
#clock{
background: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var clock =document.querySelector("#clock")
if(clock.getContext){
var ctx = clock.getContext("2d")
//设置定时器，每一秒调用一次， 调用时清除上一次的画布
setInterval(function(){
ctx.clearRect(0,0,clock.width,clock.height)
move()
},1000)
move()
function move (){
ctx.save()
ctx.lineWidth = 8
ctx.strokeStyle = "black"
//调整坐标轴
ctx.translate(200,200) //移动画布的坐标轴
ctx.rotate(-90*Math.PI/180) //将画布的坐标轴逆时针旋转90度
ctx.beginPath()
//外层空心圆盘
ctx.save();
ctx.strokeStyle = "#325FA2"
ctx.lineWidth = 14
ctx.beginPath()
ctx.arc(0,0,140,0,360*Math.PI/180)
ctx.stroke()
ctx.restore()
//时针刻度
ctx.save()
ctx.beginPath()
for(var i =0;i <12;i++){ //时针的刻度有12个 每个刻度之间是30度
ctx.rotate(30*Math.PI/180)
ctx.moveTo(120,0)
ctx.lineTo(100,0)
ctx.stroke()
}
ctx.restore()
//分针刻度
ctx.save()
ctx.lineWidth = 4
ctx.beginPath()
for(var i =0;i <60;i++){
if(i%5!=0){ //分针刻度之间的角度是6度 但是为了提高效率 当i是五的倍数是 跳过
ctx.moveTo(120,0)
ctx.lineTo(117,0)
ctx.stroke()
}
ctx.rotate(6*Math.PI/180)
}
ctx.restore()
//时针 分针 秒针 表座
var date = new Date(); //获取系统当前的时间
var s = date.getSeconds(); //秒
var m = date.getMinutes()+s/60; //分
var h =date.getHours()+m/60 //时
h = h>12?h-12 :h //默认h是0-24 转换成0-12
//时针
ctx.save()
ctx.lineWidth =14
ctx.rotate(h*30*Math.PI/180)
ctx.beginPath()
ctx.moveTo(-20,0)
ctx.lineTo(80,0)
ctx.stroke()
ctx.restore()
//分针
ctx.save()
ctx.lineWidth =10
ctx.rotate(m*6*Math.PI/180)
ctx.beginPath()
ctx.moveTo(-28,0)
ctx.lineTo(112,0)
ctx.stroke()
ctx.restore()
//秒针
ctx.save()
ctx.strokeStyle ="#D40000"
ctx.fillStyle = "#D40000"
ctx.lineWidth =6
ctx.rotate(s*6*Math.PI/180)
ctx.beginPath()
ctx.moveTo(-30,0)
ctx.lineTo(83,0)
ctx.stroke()
//表座
ctx.beginPath()
ctx.arc(0,0,10,0,360*Math.PI/180)
ctx.fill()
//秒头
ctx.beginPath()
ctx.arc(96,0,10,0,360*Math.PI/180)
ctx.stroke()
ctx.restore()
ctx.restore()
}
}
}
</script>
</body>
</html>
显示的效果如下
如果发现错误请及时留言，有不懂的也可以留言，我会及时解答！！！！