<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
canvas{border:1px solid red;}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var can = document.getElementsByTagName("canvas")[0];
var con = can.getContext("2d");
function sb(){
//先画一个基础的圆
con.beginPath();
con.fillStyle="red";
con.arc(300,300,200,0,360,false);
con.fill()
//1.画分钟的刻度
con.beginPath();
con.lineWidth = 2;
for(var i=0;i<60;i++){
con.moveTo(300,300);
con.arc(300,300,200,6*i*(Math.PI/180),6*(i+1)*(Math.PI/180),false)
con.stroke();
}
con.closePath()
//2.覆盖掉多余的线
con.beginPath();
con.fillStyle="red";
con.arc(300,300,190,0,360,false);
con.fill();
con.closePath();
//3.画时针的刻度
con.beginPath();
con.lineWidth = 5;
for(var i=0;i<12;i++){
con.moveTo(300,300);
con.arc(300,300,200,30*i*(Math.PI/180),30*(i+1)*(Math.PI/180),false)
con.stroke();
}
con.closePath()
//4.覆盖掉多余的线
con.beginPath();
con.fillStyle="red";
con.arc(300,300,190,0,360,false);
con.fill();
con.closePath();
//8.获取时间；
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
//5.画时针
con.beginPath();
con.lineWidth = 5;
con.moveTo(300,300);
con.arc(300,300,130,(30*h+m/2-90)*(Math.PI/180),(30*h+m/2-90)*(Math.PI/180),false)
con.stroke();
con.closePath();
//6.画分针
con.beginPath();
con.lineWidth = 3;
con.moveTo(300,300);
con.arc(300,300,160,(6*m-90)*(Math.PI/180),(6*m-90)*(Math.PI/180),false)
con.stroke();
con.closePath();
//7.画秒针
con.beginPath();
con.lineWidth = 1;
con.moveTo(300,300);
con.arc(300,300,200,(1*s-90)*(Math.PI/180),(1-90)*(Math.PI/180),false)
con.stroke();
con.closePath();
//画一个圆中心
con.beginPath();
con.fillStyle="black";
con.arc(300,300,10,0,360,false);
con.fill();
con.closePath();
//给一个时钟的文字时间
con.save();
con.translate(300,300)
var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
con.beginPath();
con.fillStyle="black";
con.strokeStyle="black";
con.font="30px false";
con.textAlign="center";
con.textBaseline="middle";
// con.strokeText("lala",180*Math.cos(90*Math.PI/180),180*Math.sin(90*Math.PI/180))
for(var i=0;i<12;i++){
con.strokeText(arr[i],150*Math.cos(i*30*Math.PI/180),150*Math.sin(i*30*Math.PI/180))
// console.log(30*i-90)
}
con.closePath()
con.restore() ;
// console.log(Math.sin(30*Math.PI/180))
}
sb()
setInterval(sb,1000)
</script>
</body>
</html>
需要了解web前端更多课程代码+素材+开发工具，加群434623999
