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

7 x- p* L& V% F3 C$ v& Z

//分针刻度
' S4 u$ U3 x3 q& z

& w" c3 T0 f$ R5 r) U0 ^

for(var i=0; i<60;i++){ 5 g2 L9 w2 k% o; f$ h# P

" F6 g6 W6 @) Y [

cxt.save(); - g, h: j; X4 ~; C& ~

8 Z( N4 ?" w1 f4 A$ S' h' j

cxt.lineWidth=5; # {% w4 k: E: |, {2 t4 z

% t$ J; _; a' E/ X/ y x

cxt.strokeStyle="#990033";
) L K6 f, W( N: t) J: v+ E

& J1 V. l3 R# F) e' O

cxt.translate(250,250);
: n- N0 A1 M* v! x( s) `

4 t9 m+ k8 x) s- Z% s2 q

cxt.rotate(6*Math.PI/180); * G/ |# g# E4 {& L1 V

4 B R) }$ p" }) [5 ?9 B

cxt.beginPath();
- G0 c4 L. W, p( H

% m9 r) |$ c9 @) X

cxt.moveTo(0,-180);
* N5 U0 v0 C0 b" w

8 ?3 A5 r5 L5 y5 D5 |, u

cxt.lineTo(0,-190);
- }$ D- l, r6 Z/ S) b( T( u

E4 U8 s7 _; ]; b& y. ?; a

cxt.stroke();
( ~+ x9 C9 k! ^' g! i! U7 I; y

, ]9 i, ~6 v6 Q4 T z

cxt.closePath();
# T2 J, y5 I/ g3 i1 k8 k6 Z8 P, Q

* F3 R: q2 x0 ^- i& n. t/ K7 p5 p* U

cxt.restore(); 3 J/ {- b1 k& i1 l! A

" }. V' L, b: w/ h+ |; h% z

}
4 z3 N Q9 }# D" \

复制代码

效果如图： . d9 L; ?. h. n8 }3 Y7 d

# {1 s' d- I# ^- X2 ?
现在开始画指针了，先画时针吧： 1 b8 D. W) h; y, u

# Q9 f5 q4 @7 E2 r

& B$ d) H0 O" i8 w

! M7 G4 }: @9 Q- z1 d% X

//时针
! `0 P" m7 _7 q8 U4 c3 Z, x

) f% a8 J9 S0 L6 {3 t( X3 j

cxt.save(); //设置旋转环境
) N' @% Q) |8 j1 J+ P

: t' E9 @! J4 b2 `. N6 x

//时针样式
; n; u0 p6 W% M% c

1 S; G* ?( [0 s* P, h

cxt.lineWidth = 7;
! @2 m( g1 n2 e$ b* K

, O1 F- q+ I( e4 L% Q: p% K0 z

cxt.strokeStyle="#853752";
1 L/ X+ i# K4 Z3 \1 S6 E6 G

+ q! B b+ F) O9 g* l

cxt.translate(250,250); //设置异次元空间原点
! Y& m: K% n9 N K+ s/ ?% B

# E* c8 n. F" Q e4 r! n

cxt.rotate(30*Math.PI/180); //设置旋转角度
+ d& x4 b. x o y

" n ]! L3 S- f; y

cxt.beginPath(); //画笔开始
* _: u: d: R! |9 o9 i

& Q+ E' O& v+ u$ U+ w7 U

cxt.moveTo(0,-140); //画线，从坐标0，-140开始 ( h7 `6 k6 |$ E# D; g; S& s

! `$ z9 F# W, S- B! e- h% r, N

cxt.lineTo(0,10); //到坐标0，10结束
, l& I6 g; t" ]9 w1 f! ?& _( T5 V

- Q3 ^! H9 {. i3 i# J3 U1 J

cxt.stroke(); //绘图 0 b4 l- E" X+ g: b

/ m( W+ g* l) l4 Y5 u) O5 a

cxt.closePath(); //结束画布 1 P1 h9 Q/ z1 |. I C8 u

0 ?- B, @& [, X# d

cxt.restore(); //将旋转之后的元素放回原画布
5 \; b( k# P( G* g

复制代码

时针现在实际上就是画一个直线，因为要旋转，所以是在异次元空间设置原点
( d' j0 |+ l! p- [. y& V D效果如图： * K M7 e5 F2 t

) j# G/ N) q5 P! ]" b
那分针和秒针就一样一样的了，稍微给点变化，比如给长一点，指针细一点 ' ^$ v' D, V2 d; A7 L0 W+ \& m