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

今天为大家分享一个html5 时钟的小例子，希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例，希望对你们的学习有帮助！高手嘛！请跳过吧！
) V5 @* ^% {" B7 |+ {8 R好了，闲话少数，先看看一下我们的案例效果图吧！
+ G& c0 O- t4 T c0 D7 I+ T

6 K) o. p! \% j `% a: R$ t

4 u# R, [, @, j" _; ?
7 s6 C% ^# Y Q, w好了，这是用什么写的呢，这大家都知道，肯定是html5 的canvas标签和js共同完成的啦，利用canvas的绘图的属性画一个一个的形状，现在就跟我一起画吧！ , e z% R; p6 r$ u2 y
分析：时钟包括表盘，小时刻度，分钟刻度，时针，分针，秒针 ( T. o, \5 r) ?# v7 w' J& J; Z+ u
首先当然是html5 canvas 声明：

! A. n4 k! d2 i! D4 d4 C

<canvas width="500" height="500" style="background:#DED7C6; margin:50px auto; border-radius:40px; display:block; " id="clock"> . U, A/ ^0 n! c2 w/ \( W( G

8 ]: l3 r+ T2 E8 Z& K

您的浏览器当前版本不支持canvas表签
. S8 m2 |. {' `7 d

" E/ m) F' V( C

</canvas>
% t3 }- Y7 W2 O, n

% y. u0 ?9 t1 G* V

复制代码

在body里面写一个canvas标签，设置宽高为500,500(ps:设置宽高时建议按照上面的写法给，不是说在样式表里面不能给，在样式表里面给宽高，在绘图时图形的位置会出错)，背景颜色设为#DED7C6； , E% g- f) r# x0 A9 i: U* ]
开始绘图了：
2 Y1 E( a1 d4 K8 `- r( _6 h% G+ A7 |

! C1 P! m/ r6 A, P7 A

" |: w$ B0 R% c- ~

/ N3 C( S% S) n3 G0 u) ~

3 }- Y( [4 r) q+ y' E+ ]

//获取画布DOM 还不可以操作
4 G" }7 w' Y2 l) T* U

; J- U5 J3 U6 M: a9 X

var canvas = document.getElementById('canvas');
. t7 x$ F" Y! o9 t# `

" E( e) o( I R, t

//设置绘图环境 1 X" z+ w$ v. U

$ x) R+ V% t& J- V5 N/ g

var cxt = canvas.getContext('2d'); % S, }5 n! C& V- k

4 `/ ?6 g' O2 k5 a9 t" Y

</script> , Z) t0 i' i4 u( ~, G0 z

复制代码

先获取canvas DOM, 设置绘图环境，目前还只有2d；
- ~( T+ f! |" k（为节省版面，js部分拆分的部分不加script标记了）
4 n% p: d2 Q# g; W画表盘： 9 _3 m7 F# k, O) C/ I. q3 T* n

# |" C9 K+ p- P7 f' w

//表盘 9 |/ I4 s; @3 w; {% y, l9 z, M

, W( B' g4 B( b* P+ X3 ^6 h/ N1 }% }

cxt.beginPath(); //画笔开始
7 J: J$ u/ C% x* R& s

2 I1 g x/ A9 R+ l7 z4 W0 i. v% C

cxt.lineWidth = 5; //设置画笔的线宽
# o! w& u! J0 U, b' j% j9 B' p

0 \$ a+ w S6 O& K" f3 ?6 W! Z' h i, T

cxt.strokeStyle="666666"; //设置画笔的颜色 , O$ Y7 E8 e8 R, F ~

1 ]% W4 W9 G" R$ M: j$ X4 E6 P

cxt.arc(250,250,200,0,360,false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针 8 b: X, `1 S# d# ?5 b- ^

+ h& l/ C: V. z) }. o, n5 C! s& t

cxt.stroke(); //绘图
5 b& m2 B% z+ }$ d. K! ?( q

' r2 a" Y6 s- x

cxt.closePath(); //结束画布 0 P# d6 R# @: f

复制代码

写有注释，看得懂不，解释一下，画形状一般都需要写一个开始画笔和结束画布，你自己写一下，看看效果你就知道了，这是画的空心圆，效果是这样的： 1 H! i$ l+ B% z: V* B1 z3 ]% \( ^

- \ U6 u: I- o( v3 L: e2 x然后我们开始画刻度，刻度有小时刻度和分针刻度，先画小时刻度吧：
6 w; [; C$ b. A! H/ b6 T( |

) F2 J+ `9 h& g; v$ Z0 }

//时针刻度 8 d7 I4 ]7 o: }1 d V

+ g; j' g# G6 G8 I+ X7 I* \/ R( r

for(var i=0; i<12; i++){ " |4 l5 [9 S! s3 s% B; V

/ Z1 B0 ]5 u; ~5 L$ e _" @

cxt.save(); //设置旋转环境
C( O7 M: V5 p7 w. U h" w

4 S: x5 \& u |" k! J9 E7 {

//设置时针的样式
$ a" j; N8 t/ r. g1 E

3 g. e$ L' Q: b- {8 G6 }/ k

cxt.lineWidth=7; ) K6 z" v! w" ^3 T

! Z0 }" j$ q& \

cxt.strokeStyle="#7E9E7F";
3 ~' v6 B1 G* |! H4 |0 S! e1 Z* Y1 J% f

# J+ A% ` x! ]) G

; v3 e5 W( f* |2 O6 q+ n. }5 w

8 g- ]! V, |! x* @7 ]8 ^

cxt.translate(250,250);//设置异次元空间的原点 ) Q2 e: c0 s. Z' D& M2 Q

& [6 r# f+ ]2 r4 s5 K

; n9 m2 J3 q6 o) L0 m( D7 c7 W

& _* }- ]. f" v) ]/ X' O) c& p

cxt.rotate(30*Math.PI/180);//设置旋转角度
R* S2 @# g6 H

9 F" i' q. w( L5 m( ?% ^

cxt.beginPath(); //画笔开始 % x& N1 \7 |! R

/ I0 {5 N+ F$ N' ~# K

cxt.moveTo(0,-170); //画线，从坐标0，-170开始
0 K# G: }7 E* I6 p

/ B7 t; O5 ]. e* q& v' x

cxt.lineTo(0,-190); //到坐标0，-190结束
" _( g0 N) a3 S7 b4 S0 [& {

, ~' K1 S j9 h& v

cxt.stroke(); //绘图 4 e# X/ v. w4 b" G

2 R6 K! z& N$ s4 r

cxt.closePath(); - i/ \7 x! r. {- \4 j/ |9 j4 F

6 F9 [3 E- w/ y, F: g# X

cxt.restore(); //将旋转之后的元素放回原画布
( k5 J, @- j5 H2 {7 R

8 [8 @+ B" u% K

}
0 Z$ u, g9 r) \2 Q0 I( |) ?

复制代码

因为小时刻度是要在表盘上旋转分布的，所以我们要设一个中心原点，以原点为中心，表针可以旋转指向某个时刻，当然，刻度不只有一个，所以我们用for循环的方式，画出12条线段，旋转角度说明一下，弧度 = 角度*Math.PI/180,要是你有兴趣，可以查一下这是怎么来的（数学里有），一周有12个刻度，一个刻度就是30°； Y/ T8 O. t4 k: z0 m
效果如图：

. l) p# k9 T6 |! L7 f8 d6 V画分刻度，原理跟时刻的是一样的，只是角度不一样：
7 ?4 |) Y% ^1 i$ q k0 @