HTML5实战-canvas绘制钟表的示例代码分享


本文摘自PHP中文网,作者黄舟,侵删。

用canvas绘制了一个钟表,废话不多说了,直接上代码吧。效果图如下:

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

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas钟表</title>

<meta name="Keywords" content="">

<meta name="author" content="@my_programmer">

<style type="text/css">

body{margin:0;}

</style>

</head>

<body onload="run()">

<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字,说明你的浏览器弱爆了!</canvas>

<script>

window.onload=draw;

function draw() {

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

context.save(); ///////////////////////////////////保存

context.translate(200,200);

var deg=2*Math.PI/12;   

//////////////////////////////////////////////////表盘

context.save();   

context.beginPath();   

for(var i=0;i<13;i++){

var x=Math.sin(i*deg);

var y=-Math.cos(i*deg);

context.lineTo(x*150,y*150);   

}

var c=context.createRadialGradient(0,0,0,0,0,130);

c.addColorStop(0,"#22f");

c.addColorStop(1,"#0ef")

context.fillStyle=c;

context.fill();

context.closePath();   

context.restore();   

//////////////////////////////////////////////////数字

context.save();

context.beginPath();

for(var i=1;i<13;i++){

var x1=Math.sin(i*deg);

var y1=-Math.cos(i*deg);

context.fillStyle="#fff";

context.font="bold 20px Calibri";

context.textAlign='center';

context.textBaseline='middle';

context.fillText(i,x1*120,y1*120);   

}

context.closePath();   

context.restore();   

//////////////////////////////////////////////////大刻度

context.save();

context.beginPath();   

for(var i=0;i<12;i++){

var x2=Math.sin(i*deg);

var y2=-Math.cos(i*deg);

context.moveTo(x2*148,y2*148);

context.lineTo(x2*135,y2*135);   

}   

context.strokeStyle='#fff';

context.lineWidth=4;

context.stroke();

context.closePath();

context.restore();   

//////////////////////////////////////////////////小刻度

context.save();

var deg1=2*Math.PI/60;

context.beginPath();   

for(var i=0;i<60;i++){

var x2=Math.sin(i*deg1);

var y2=-Math.cos(i*deg1);

context.moveTo(x2*146,y2*146);

context.lineTo(x2*140,y2*140);   

}   

context.strokeStyle='#fff';

context.lineWidth=2;

context.stroke();

context.closePath();   

context.restore();   

///////////////////////////////////////////////////文字

context.save();

context.strokeStyle="#fff";

context.font=' 34px sans-serif';

context.textAlign='center';

context.textBaseline='middle';

context.strokeText('canvas',0,65);   

context.restore();   

/////////////////////////////////////////////////new Date

var time=new Date();

var h=(time.getHours()%12)*2*Math.PI/12;

var m=time.getMinutes()*2*Math.PI/60;

var s=time.getSeconds()*2*Math.PI/60;

 

////////////////////////////////////////////////时针

context.save();

context.rotate( h + m/12 + s/720) ;

context.beginPath();

context.moveTo(0,6);

context.lineTo(0,-85);

context.strokeStyle="#fff";

context.lineWidth=6;

context.stroke();

context.closePath();

context.restore();

//////////////////////////////////////////////分针

context.save();

context.rotate( m+s/60 ) ;

context.beginPath();

context.moveTo(0,8);

context.lineTo(0,-105);

context.strokeStyle="#fff";

context.lineWidth=4;

context.stroke();

context.closePath();

context.restore();

/////////////////////////////////////////////秒针

context.save();

context.rotate( s ) ;

context.beginPath();

context.moveTo(0,10);

context.lineTo(0,-120);

context.strokeStyle="#fff";

context.lineWidth=2;

context.stroke();

context.closePath();

context.restore();   

context.restore();/////////////////////////////栈出

setTimeout(draw, 1000);/////////////////////////////计时器

 

}

 

</script>

</body>

</html>

以上就是HTML5实战-canvas绘制钟表的示例代码分享的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详解HTML5如何获取手机陀螺仪角度信息的示例代码

h5编辑器核心思想的实例分析

如何用HTML5中的canvas绘制渐变矩形

h5history 模式的实例教程

canvas基础的学习

详解HTML5浏览器兼容性解决方案

HTML5/css3 经典案例-无插件拖拽上传图片(一)

h5怎样做出日历校验功能

HTML5 常用语法一览

带你了解什么是HTML5

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...