-
Notifications
You must be signed in to change notification settings - Fork 0
/
homework--zhongbiao .html
107 lines (101 loc) · 2.27 KB
/
homework--zhongbiao .html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<canvas id="canvas" width="500px" height="500px" style="border: 1px solid;"></canvas>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var w=canvas.width;
var h=canvas.height;
function move(){
ctx.clearRect(0, 0, w, h);//清除canvas
//外形圆框架
ctx.save();
ctx.beginPath();
ctx.arc(250,250,210,0,2*Math.PI);
ctx.lineWidth=6;
ctx.strokeStyle="greenyellow";
ctx.stroke();
ctx.closePath();
ctx.restore();
//最内心圆
ctx.save();
ctx.beginPath();
ctx.arc(250,250,7,0,2*Math.PI);
ctx.lineWidth=6;
ctx.strokeStyle="black";
ctx.stroke();
ctx.closePath();
ctx.restore();
//表盘刻度
ctx.beginPath();
ctx.save();
ctx.translate(250,250);
for (var i=1;i<=60;i++){
ctx.beginPath();
ctx.lineWidth=4;
ctx.strokeStyle="black";
ctx.rotate(6/ 180 * Math.PI );
if(i%5==0){
ctx.strokeStyle="red"
ctx.moveTo(0,-175);
ctx.lineTo(0,-195);
ctx.font = "bold 25px 宋体";
ctx.fillText(i/5,-10,-150);
ctx.closePath();
}else{
ctx.moveTo(0,-185);
ctx.lineTo(0,-195);
}
ctx.stroke();
}
ctx.closePath();
ctx.restore();
var time=new Date();
var hour=time.getHours();
var min=time.getMinutes();
var s=time.getSeconds();
console.log("小时:",hour%12);
console.log("分钟:",min);
console.log("秒:",s);
//指针
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate( (0.5/60+(hour%12)*30+30/60*min)/180*Math.PI );
ctx.moveTo(0,0);
ctx.lineTo(0,-130);
ctx.lineWidth=8;
ctx.strokeStyle="purple";
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate((-180+min*6+6/30)/180*Math.PI);
ctx.moveTo(0,0);
ctx.lineTo(0,140);
ctx.lineWidth=5;
ctx.strokeStyle="pink"
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate((6*s-90)/180*Math.PI);
ctx.moveTo(-20,0);
ctx.lineTo(180,0);
ctx.arc(135,0,5,0,2*Math.PI);
ctx.fillStyle="black"
ctx.strokeStyle="red";
ctx.lineWidth=3;
ctx.stroke();
ctx.fill()
ctx.closePath();
ctx.restore();
}
move();
setInterval(function(){
move();
},1000);
clearInterval();
</script>