Html5在移动设备上表现抢眼,几乎所有稍微高端一点的设备(乔帮主的iPad,iPhone和Andriod的平板手机等)的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。
所以就看了一点html5的东东,并研究了一下canvas标签的用法。如果你从来没有用过canvas标签,请参考Html5 canvas cheat sheet。
大家都知道web2.0以来大量的使用ajax,loading的小图标也有很多很多种,甚至还有专门提供loading图片的网站。所以我就想能不能让html5解决一下这个以前用gif文件解决的问题。没想到非常的简单,只用了不到一小时的时间就搞定了两个,而且这样做出来的loading图标是可定制的,既可以定制颜色,也可以定制大小等属性。
废话少叙,我们先来看下这两个loading图标的效果,注意,如果你用的是PC,请使用Firefox,Opera或者IE9看此效果。
第一个带着小尾巴转动的loading图标画图的思路是,首先画一个圆,然后在圆的边上按顺序画大小逐渐减小的小圆点,在每次刷新画布时改变这一系列的小圆点在大圆边上的位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
|
,在一个圆环上有一个相同圆心相同半径的圆弧在不停的转动。画图的步骤是首先画一个圆环,然后画一个不同颜色相同圆心半径的圆弧,在每次刷新画布时改变圆弧的起始角度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
|
目前从移动设备对Html5的支持来看,html5大有可为。
天下大势,合久必分,分久必和。PC开发时web应用在很大程度上统一了客户端程序;而现在移动开发使用不同的系统不同的语言,将来大多数应用必然会统一到一种语言。这种语言必然是html5 javascript.