教你用html5 canvas写一个时钟详细解析教程源码(4)_H5之家

h3 E2 ^4 g9 i* }2 i

8 g \9 p: d8 p# K% p! p2 P

: n- \4 a. p! Q5 ~, t

//获取时间 $ n5 U$ u+ J- \

% F% M0 p V7 {* ~: D

var now = new Date(); //定义时间 " b1 [' t8 P/ y, s4 c

. }. h7 ]- K/ z, h0 }3 _% w

var sec = now.getSeconds(); //获取秒
' K5 _! j J+ a% e

7 E! o: y7 k. z+ s [" `

var minute = now.getMinutes(); //获取分钟
* F4 ?6 v$ m9 J4 ?3 f

. f r0 v4 Y: O' h/ E

var hour = now.getHours(); //获取小时
8 @& z7 B3 S1 P2 _2 f% R0 L* i* g

! {) M+ I/ U! y

//小时必须获取浮点类型，产生偏移（小时+分钟比） : j i2 a- x. h2 O3 t

- G* c! d9 N7 C

hour = hour + minute/60; ' M* n! N* [( ~; t5 R1 s

; R, r( z4 E; ~+ l; n

//将24小时转换为12小时
% N m* |$ j& R/ Y

( w7 q3 O- R6 a8 J

hour=hour>12?hour-12:hour;
# ^9 x; ~% J. O) @

复制代码

为什么要写最后2行呢？解释一下，最后一行是因为本地时间是24小时制，而我们的时钟是12小时，所以我们要转换一下，变成12小时；倒数第二行是，如果不加这行，时针只要没有满一个小时，指针一直指针整数刻度上的，而实际的钟表不是这样的，时针在不是整点的时候会有一点偏移，所以我们加的偏移量就是分针走的比例（大家有兴趣可以试一下不加会是什么效果）； $ H4 _ o# L' c6 h
要动起来我们需要用到setInterval()函数，那我们将我们写的代码用一个函数包起来，这样就简洁了，但是不包含开始的2句，我们用drawClock（）吧
% S* m4 v, f/ ~' v5 W" O$ M

: |' h1 z5 M& E: H, E8 x1 {. L2 Y

//使用setinterval();让时钟动起来
7 X2 Z8 w' C* K9 `

0 q9 q- Q/ Q. O7 b

setInterval(drawClock,1000);
/ ~0 W4 Y6 C6 r; w( l7 ]- r/ p

4 q; z8 W" }+ O6 t2 ]6 J3 z- Y

复制代码

ok，动起来，好，刷新，咦，没有动耶，为什么呢，原来我们的指针都只是定义了一个角度，肯定懂不起来啦，好，我们将我们获取的时间嫁到指针上
7 {7 W- r# {1 F

1 p! B( }: ]6 t+ Z2 Y1 ]: m, U( n

. g! Z; g |* a

& M" U! ^2 R- N3 g3 Y

时针 - |& ~6 _; S. A! e

( I* {( y! V z8 Q: R

cxt.save(); # G/ J$ v2 E4 T" o9 f8 ^

$ ~( h" |+ _9 [9 m: Q( s1 X% Y% _

//时针样式
. D" ?8 T+ l' D3 y/ O% g

# s7 h: t7 f; S9 ]! w& f- v2 `, ]

cxt.lineWidth = 7;
0 f) N. p2 @0 i/ B+ z* _

0 h& `! _/ r' J9 a& w% k! g1 g

cxt.strokeStyle="#853752";
* R, i* G+ I/ b2 m/ x2 O9 E

( k9 ?( ]% h# V' m. V b& H

cxt.translate(250,250);
: T( O: }+ l1 B3 C

2 a$ ~# x# V$ k5 Y( z3 I' Z( e# f$ l

cxt.rotate(/*hour**/30*Math.PI/180); % D9 g0 y$ s) e6 ~3 e* D* }

4 w ^9 e: U0 x' _5 G' Y" G v$ n

cxt.beginPath(); " j- t8 r7 R8 X: j

' q' T# }; ?4 I$ t' K, c' H% X' |2 j

cxt.moveTo(0,-140);
5 u" ?" h* M5 l! B

! l* x6 I6 e4 C$ u

cxt.lineTo(0,10);
$ M3 z& Z! X' }6 u" o

t% N7 Y; n9 p, h/ i

cxt.stroke(); $ [( k6 d3 i" v* l

4 U- r$ ?' B( o4 J, @4 Q) L0 k

cxt.closePath();
% o% X' ]% F# E8 B4 d5 o

3 U: i2 j: @2 C& Z7 I

cxt.restore(); ) e/ c5 ~3 }. q5 @& p) I3 F

/ q+ `# G1 H2 o$ Y! J

: g' k0 [& |! t7 I

/ s$ D, w d: O% \3 F5 R

//分针
8 k( N0 M; O( L

/ W5 d, j4 T$ X H) e8 [8 M" D

cxt.save();
& L' }9 t+ O) U, x( i1 [, U9 j

4 c0 |) f4 @& g3 V" }# D; g) B

//分针样式
" H4 m7 D( V' k% z

: v; l7 W; j( {7 j' P) A

cxt.lineWidth = 5; % p: ]" S, n- S2 @' y/ o

8 n) `5 n) w2 u8 a0 y8 f

cxt.strokeStyle="#990033"; , |8 }* d, i* M( x

. x ?; S+ n9 N c

cxt.translate(250,250);
+ [! M! X0 i, L) r* t

, g6 q( A& A; f# H. k" \0 U, H( m

cxt.rotate(minute*6*Math.PI/180); * R# G* Z r% ?5 f( @& j! B3 o# y

. t# `9 M9 Y5 r( v0 d) g6 }

cxt.beginPath();
% M% W" ], U( z

" e, f1 v r. d5 P

cxt.moveTo(0,-160);
! n1 E2 Z( y B/ u. G

- N/ X- N* x' Z/ Y* i

cxt.lineTo(0,15); : C2 D. T; y7 i v- d8 {$ {# |. G6 E

6 u4 l& f ]- x- P

cxt.stroke(); ) Y0 P/ m9 k1 Y8 i. [/ _7 c

( f1 i6 Z# D1 X0 K0 I. V/ ?

cxt.closePath();
- u/ \6 F1 J; S

) W& V& y( f. B* W8 U

" d/ T( P+ o, g5 j2 A) y$ E$ N

( _1 a5 \/ a, W; D. i( ?# k

cxt.restore(); $ n! y) K0 g5 v+ b3 ~2 D/ U$ m

' `; ?5 f9 F# T/ r7 T8 N5 o

3 U; f$ C& z) h0 w. \; F

% ^ M: w7 A+ v: E" V

//秒针
; S# f o9 L( R8 w. y ]

; W% d: I3 J! E1 {

cxt.save();
+ b* P5 k% a! x( V0 Z

$ _% \1 Z7 [5 M* I% _

cxt.lineWidth = 3;
; r; D+ `9 D5 J& o1 }1 J# e' [

* H! j/ C" E% Z) M2 J+ _

cxt.strokeStyle="#CC3333"; 5 M) \0 ?3 J! X3 H# {( O: I0 ?

P# D2 o8 B6 n: {" m8 i) ~

cxt.translate(250,250); - o+ p$ z. U/ {, s1 Z$ Y! M

( I L& ~8 o8 B% d' t

cxt.rotate(sec*60*Math.PI/180); # ?' m+ R2 d; k+ ?5 P) g b

1 B- H, v+ p6 |* R3 x/ b, `! w5 t

cxt.beginPath(); ( d+ }9 d& ] E3 e

+ d- o# o) G9 v# p: _

cxt.moveTo(0,-185);
2 m5 Y0 Q: w+ o

1 e4 O; l) _3 B; d' L: X

cxt.lineTo(0,20); 0 _8 }% E {" i' v

" R) g9 b' f0 y

cxt.stroke();
% Y4 v7 C) u' R9 ~' U! T; I- H% n5 F

: f% j) B* q' h

cxt.closePath(); 8 i6 X: _( a' n2 j- P- s

复制代码

看各指针旋转角度的变化，不错，被你找到了，那现在应该可以转了吧，看图 4 b. p, B& i2 q
如图所示：
8 O! P) D3 i4 F

% x5 o% t3 X w& o怎么会这样呢？你的是这样吗？是这样就对了，原因是每一次指针旋转都是画上去的，走一步画一步，就出现了像扇子一样的东西，所以我们要在画图之前清空画布，就是画之前清掉前面画的 ' J4 j. m9 m' N$ U- `8 c% R9 U