1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > 时钟-豪情</ title >
6+ < meta name ="viewport " content ="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no ">
7+ < style >
8+ .c {background-color : # f1f1f1margin : 0 auto;}
9+ </ style >
10+ </ head >
11+ < body >
12+ < canvas id ="canvas " class ="c " width ="500 " height ="500 "> </ canvas >
13+ < script >
14+ ( function ( ) {
15+ var canvas = document . getElementById ( 'canvas' ) ;
16+ var ctx = canvas . getContext ( '2d' ) ;
17+ // 表盘
18+ ctx . beginPath ( ) ;
19+ ctx . lineWidth = 10 ;
20+ ctx . strokeStyle = '#99ccff' ;
21+ ctx . arc ( 250 , 250 , 200 , 0 , 360 , false ) ;
22+ ctx . closePath ( ) ;
23+ ctx . stroke ( ) ;
24+ // 分针
25+ for ( var i = 0 ; i < 60 ; i ++ ) {
26+ ctx . save ( ) ;
27+ ctx . translate ( 250 , 250 ) ;
28+ ctx . beginPath ( ) ;
29+ ctx . rotate ( i * 6 * Math . PI / 180 ) ;
30+ ctx . moveTo ( 0 , 190 ) ;
31+ ctx . lineWidth = 5 ;
32+ ctx . lineTo ( 0 , 180 ) ;
33+ ctx . strokeStyle = '#999' ;
34+ ctx . closePath ( ) ;
35+ ctx . stroke ( ) ;
36+ ctx . restore ( ) ;
37+ }
38+ // 时针
39+ for ( var i = 0 ; i < 12 ; i ++ ) {
40+ ctx . save ( ) ;
41+ ctx . translate ( 250 , 250 ) ;
42+ ctx . beginPath ( ) ;
43+ ctx . rotate ( i * 30 * Math . PI / 180 ) ;
44+ ctx . moveTo ( 0 , 190 ) ;
45+ ctx . lineWidth = 5 ;
46+ ctx . lineTo ( 0 , 170 ) ;
47+ ctx . strokeStyle = '#333' ;
48+ ctx . closePath ( ) ;
49+ ctx . stroke ( ) ;
50+ ctx . restore ( ) ;
51+ }
52+ // 中间圆点
53+ ctx . beginPath ( ) ;
54+ ctx . arc ( 250 , 250 , 10 , 0 , 360 , false ) ;
55+ ctx . closePath ( ) ;
56+ ctx . fill ( ) ;
57+
58+
59+ // setInterval(function(){
60+ // ctx.save();
61+ // ctx.translate(250, 250);
62+ // ctx.beginPath();
63+ // ctx.moveTo(0, 0);
64+ // ctx.lineWidth = 5;
65+ // ctx.strokeStyle = '#000';
66+ // var d = new Date();
67+ // var h = d.getHours();
68+ // var m = d.getMinutes();
69+ // var s = d.getSeconds();
70+ // ctx.rotate(s * 6 * Math.PI / 180);
71+ // console.log(s);
72+ // ctx.lineTo(0, 150);
73+ // ctx.closePath();
74+ // ctx.stroke();
75+ // ctx.restore();
76+ // }, 1000);
77+
78+ } ( ) ) ;
79+ </ script >
80+ </ body >
81+ </ html >
0 commit comments