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

$ j6 C# |( @ O

. @6 f( ^( m+ Z1 V$ t' H7 z

* d- q/ l- I( q# Z7 J

//分针 ( @3 l! |" u7 ?: |9 M; \

' ]; E- I' ?( U& Z

cxt.save();
! ~0 _3 _( e$ v' W6 Z

" F0 |( a0 t- ]& l+ c* s+ x* v

//分针样式
6 F) p' O0 I5 h! Q, }

: [* @, o0 r. {0 o8 b; T

cxt.lineWidth = 5;
7 ?6 _% g) G' |7 i; @! B

0 o3 h- g' @5 D6 B+ ~

cxt.strokeStyle="#000"; ) L4 Y+ k8 l; I& d" t/ [

3 l; _$ ~- \3 ^& \9 {

cxt.translate(250,250);
4 G4 X1 B- s4 i, b# \8 w A

7 p+ H, i0 s- N& ~" U

cxt.rotate(6*Math.PI/180);
8 e# I# r8 b+ r# |. J, x) B

) O" s- h# E7 v% s

cxt.beginPath(); & {. E/ y2 I8 ]

F& ^$ `* Y/ J$ P7 j! T

cxt.moveTo(0,-160); 7 l9 c) `$ T3 p( p6 r8 }6 A

; d0 O1 |' A+ H; h& j Y

cxt.lineTo(0,15); 2 G; p' w! a; I

% y4 _- v. W3 ~+ I

cxt.stroke();
5 H" M. C1 b- ^! f- B% v

$ [# F; p1 R. _( B. y- Y* x

cxt.closePath();
" N6 l7 T4 Q# I9 M

: M# z8 j# @3 Q. Z. E/ B

cxt.restore(); ) V& d4 G: L! m& |9 K! K

; t5 m$ Z( N, h

+ W8 Z$ Z. q6 T$ |) }# Q

4 w7 e/ v4 A% D' T- K

//秒针
1 d. W7 d, l/ q8 M

7 Z5 O! \ b# r" X# J

cxt.save(); 4 z1 _, B2 h8 D$ |5 z0 l; j

# h9 q% _- ]! Q3 m

cxt.lineWidth = 3; - L6 G4 V9 z# T" O R$ A

4 T' x- _- R9 o

cxt.strokeStyle="#f00";
0 M1 t/ P! Q! O3 q) a9 n- U }

! R2 x2 X% v) R; c, K! l

cxt.translate(250,250); }7 X6 S9 |$ ~5 _% _0 \" \

/ C# I# i+ G6 D& ^/ {- f) V4 c

cxt.rotate(60*Math.PI/180);
% F# X, I. _ C& W# M

8 P# t; P, n3 y4 b# l0 s7 Q% i# U

cxt.beginPath(); ; j3 P8 P8 P) V' Y% g$ O' G! Y, Q+ c

5 {& h6 e" w4 w3 m+ _+ l) Q: D

cxt.moveTo(0,-185);
) c! X* u& n4 l! J2 T! X

8 g+ K9 Z+ B) \" N. h! T; J. M9 ~

cxt.lineTo(0,20); 2 @3 U; O) C6 I: W

5 x" f, O8 l+ E/ d

cxt.stroke();
8 }" O! ?) H! T0 \: L* y1 q

6 t' d; ~. Q5 w. B6 _: i

cxt.closePath();
( O9 H( j: ^$ ?, ?

复制代码

到此为止，这个时钟的图就画出来了，就这样就结束了吗？这么丑，美化一下嘛！好吧，我们把分针稍微点缀一下！ ; X' r: M5 p o' z- D

a+ C; E n, K$ `

' N1 q4 b6 {# E" K% K2 Z

) }( P( z" ^3 X/ Y4 o

//画出时针，分针，秒针交叉点
) A2 F3 v$ N+ C7 M/ i" N* @

+ M+ g6 e5 J' T, Q3 @/ U

cxt.beginPath(); ' A* f, p0 z% y! G# E

$ K( L0 U. R0 M

cxt.strokeStyle="#f00";
/ @3 g( ]" t" i% {8 O' W

1 O5 w9 O* B. K6 V

cxt.arc(0,0,5,0,360,false);
) U3 H7 B* _" X* A. k

. V# T P5 G+ l2 @* b! A& d+ @

cxt.fillStyle="#fff"; //填充颜色
! ~) W8 j+ E; o, n! u7 Z) Q

% ?- i P: r2 x R% i

cxt.fill(); //填充
# M) G/ Y0 Z6 j r) O4 s

k# r% s) B6 c

cxt.stroke();
/ K1 r# }- ~+ h: Y9 N/ Z

( q6 j' m! K& I5 U: @! |; A6 Y5 f

cxt.closePath(); * G" {' H5 C" C4 O. L( x2 y! J

: q" ?/ p& |/ `! @4 \! \6 O3 x9 t

* K* [1 k$ y8 L$ F7 J

4 ?) ]3 Z! A" D: L0 I5 ^

//秒针装饰 I4 F# x4 [3 _7 e2 {" x3 Y$ j4 H

! q5 y7 `0 M. E. U

cxt.beginPath(); 6 q7 }/ S2 h6 e( P4 s

R4 R: v- ]1 b# L' K

cxt.strokeStyle="#f00";
2 w% y: V$ L8 e+ ~% K

8 ] ~; k% N& q J7 N) H& \

cxt.arc(0,-160,5,0,360,false);
1 V7 d$ T( C4 M' B J$ K

) A. ?8 U4 G0 n

cxt.fill(); //填充
; S/ L; n) \0 d1 m0 K$ a& \+ m

( \: b$ n, M+ M& q3 Q* I

cxt.stroke();
1 C$ m5 h3 ^; b2 A- t; J; Q

2 a+ L% ~- w8 J% Z T2 u7 [ Y

cxt.closePath(); ) W: K- \; ~" n) w( V& V

0 |: P9 v) g( A0 d

cxt.restore();
" I7 k% A, @& T2 {( a

复制代码

8 i D! o5 @4 U; ?; I3 _4 N
说明一下：上一段是画的3个指针交叉的地方，给点装饰，见图上，这样显得针是围绕一个点转的，fill（）是填充的意思，相当于是画一个实心圆，我们填充的是白色，外面的描边是红色，你可以这么理解，一个空心圆里面填充了一个白色，懂了吧；
. B3 U; I7 W6 r& M' I% u; j$ Q& P* Q( c
+ V$ _$ A5 y3 }% q下面的是分针指针尖山的一个小装饰，跟前面的是一样的，只是位置不一样，但是这样是不是更加“高端大气上档次”了； 9 ~/ ?9 g! W) n9 `
效果如图：
0 H% m( Z% \0 u6 y/ L6 s% r5 Z! ~

0 o$ S8 H& v% ]' K2 H. L
到这里就结束了吗？好像不走耶，好吧，我们让他动起来，动起来首先要知道时间，那我们就获取一下本地的时间：
& s5 Y: T6 u# ]/ X' E( X/ E