当前位置：Gxlcms > html代码 > html5canvas实现圆形时钟实例代码

html5canvas实现圆形时钟实例代码

时间：2021-07-01 10:21:17 帮助过：35人阅读

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML CLOCK</title>
  6. </head>
  7. <body>
  8. <canvas width="500" height="500" id="clock">
  9. 你的浏览器不支持canvas标签，时针显示不出来哦！
  10. </canvas>
  11. <script type="text/javascript">
  12. //画布背景颜色
  13. var clockBackGroundColor = "#ABCDEF";
  14. //时针颜色
  15. var hourPointColor = "#000";
  16. //时针粗细
  17. var hourPointWidth = 7;
  18. //时针长度
  19. var hourPointLength = 100;
  20. //分针颜色
  21. var minPointColor = "#000";
  22. //分针粗细
  23. var minPointWidth = 5;
  24. //分针长度
  25. var minPointLength = 150;
  26. //秒针颜色
  27. var secPointColor = "#F00";
  28. //秒针粗细
  29. var secPointWidth = 3;
  30. //秒针长度
  31. var secPointLength = 170;
  32. //表盘颜色
  33. var clockPanelColor = "#ABCDEF";
  34. //表盘刻度颜色
  35. var scaleColor = "#000";
  36. //表盘大刻度宽度 3 6 9 12
  37. var scaleBigWidth = 9;
  38. //表盘大刻度的长度
  39. var scaleBigLength = 15;
  40. //表盘小刻度的宽度
  41. var scaleSmallWidth = 5;
  42. //表盘小刻度的长度
  43. var scaleSmallLength = 10;
  44. //圆心颜色
  45. var centerColor = 'red';
  46. //时钟画布
  47. var clock = document.getElementById('clock');
  48. clock.style.background = clockBackGroundColor;
  49. //时针画布的作图环境（画板）
  50. var panel = clock.getContext('2d');
  51. //画线
  52. /**
  53. *画线段
  54. *
  55. *
  56. */
  57. function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
  58. //保存传入的画板，相当于每次作画新开一个图层
  59. p.save();
  60. //设置画笔宽度
  61. p.lineWidth = width;
  62. //设置画笔颜色
  63. p.strokeStyle = color;
  64. //新开启作图路径，避免和之前画板上的内容产生干扰
  65. p.beginPath();
  66. p.translate(cX,cY);
  67. //旋转
  68. p.rotate(ran);
  69. //移动画笔到开始位置
  70. p.moveTo(startX,startY);
  71. //移动画笔到结束位置
  72. p.lineTo(endX,endY);
  73. //画线操作
  74. p.stroke();
  75. //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  76. p.closePath();
  77. //在传入的画板对象上覆盖图层
  78. p.restore();
  79. }
  80. /**
  81. *画水平线
  82. */
  83. function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){
  84. drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);
  85. } 
  86. /**
  87. *画圈圈
  88. */
  89. function drowCircle(p,width,color,centreX,centreY,r){
  90. p.save();
  91. //设置画笔宽度
  92. p.lineWidth = width;
  93. //设置画笔颜色
  94. p.strokeStyle = color;
  95. //新开启作图路径，避免和之前画板上的内容产生干扰
  96. p.beginPath();
  97. //画圈圈
  98. p.arc(centreX,centreY,r,0,360,false);
  99. //画线操作
  100. p.stroke();
  101. //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  102. p.closePath();
  103. //在传入的画板对象上覆盖图层
  104. p.restore();
  105. }
  106. function drowPoint(p,width,color,centreX,centreY,r){
  107. p.save();
  108. //设置画笔宽度
  109. p.lineWidth = width;
  110. //设置画笔颜色
  111. p.fillStyle = color;
  112. //新开启作图路径，避免和之前画板上的内容产生干扰
  113. p.beginPath();
  114. //画圈圈
  115. p.arc(centreX,centreY,r,0,360,false);
  116. //画线操作
  117. p.fill();
  118. //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  119. p.closePath();
  120. //在传入的画板对象上覆盖图层
  121. p.restore();
  122. }
  123. function drowScales(p){
  124. //画小刻度
  125. for(var i = 0;i < 60;i++){
  126. drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
  127. }
  128. //画大刻度
  129. for(var i = 0;i < 12;i++){
  130. drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);
  131. //可以添加数字刻度
  132. }
  133. }
  134. function drowHourPoint(p,hour){
  135. drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);
  136. }
  137. function drowMinPoint(p,min){
  138. drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);
  139. }
  140. function drowSecPoint(p,sec){
  141. drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);
  142. }
  143. function drowClock(){
  144. panel.clearRect(0,0,500,500);
  145. panel.fillText("",10,20);
  146. panel.fillText("<a href="http://www.gxlcms.com",10,40">http://www.gxlcms.com",10,40</a>);
  147. var date = new Date();
  148. var sec = date.getSeconds();
  149. var min = date.getMinutes();
  150. var hour = date.getHours() + min/60;
  151. drowCircle(panel,7,'blue',250,250,200);
  152. drowScales(panel);
  153. drowHourPoint(panel,hour);
  154. drowMinPoint(panel,min);
  155. drowSecPoint(panel,sec);
  156. drowPoint(panel,1,centerColor,250,250,7);
  157. //drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
  158. }
  159. //drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
  160. drowClock();
  161. setInterval(drowClock,1000);
  162. function save(){
  163. var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
  164. location.href=image;
  165. }
  166. </script>
  167. </body>
  168. </html>

【相关推荐】

1. HTML5开发手机应用-详细介绍viewport的作用（图文）

2. 浅谈html5 响应式布局

3. HTML5 程序设计

4. 小程序开发之利用co处理异步流程的实例教程

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！