锐客网

  1. 首页 > it技术 > >

HTML5 canvas时钟

js



实现效果：


【HTML5 canvas时钟】 HTML5 canvas时钟
文章图片

html代码：

  5. Clock - 锐客网
  6. "text/css">
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .canvas{
  12. margin-left: 20px;
  13. margin-top: 20px;
  14. border: solid 1px;
  15. }
JS代码:

  1. var Canvas = {};
  3. Canvas.cxt = document.getElementById('canvasId').getContext('2d');
  5. Canvas.Point = function(x, y){
  6. this.x = x;
  7. this.y = y;
  8. };
  10. /*擦除canvas上的所有图形*/
  11. Canvas.clearCxt = function(){
  12. var me = this;
  13. var canvas = me.cxt.canvas;
  14. me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
  15. };
  17. /*时钟*/
  18. Canvas.Clock = function(){
  19. var me = Canvas,
  20. c = me.cxt,
  21. radius = 150, /*半径*/
  22. scale = 20, /*刻度长度*/
  23. minangle = (1/30)*Math.PI, /*一分钟的弧度*/
  24. hourangle = (1/6)*Math.PI, /*一小时的弧度*/
  25. hourHandLength = radius/2, /*时针长度*/
  26. minHandLength = radius/3*2, /*分针长度*/
  27. secHandLength = radius/10*9, /*秒针长度*/
  28. center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圆心*/
  30. /*绘制圆心（表盘中心）*/
  31. function drawCenter(){
  32. c.save();
  34. c.translate(center.x, center.y);
  36. c.fillStyle = 'black';
  37. c.beginPath();
  38. c.arc(0, 0, radius/20, 0, 2*Math.PI);
  39. c.closePath();
  40. c.fill();
  41. c.stroke();
  43. c.restore();
  44. };
  46. /*通过坐标变换绘制表盘*/
  47. function drawBackGround(){
  48. c.save();
  50. c.translate(center.x, center.y); /*平移变换*/
  51. /*绘制刻度*/
  52. function drawScale(){
  53. c.moveTo(radius - scale, 0);
  54. c.lineTo(radius, 0);
  55. };
  57. c.beginPath();
  58. c.arc(0, 0, radius, 0, 2*Math.PI, true);
  59. c.closePath();
  61. for (var i = 1; i <= 12; i++) {
  62. drawScale();
  63. c.rotate(hourangle); /*旋转变换*/
  64. };
  65. /*绘制时间(3,6,9,12)*/
  66. c.font = " bold 30px impack"
  67. c.fillText("3", 110, 10);
  68. c.fillText("6", -7, 120);
  69. c.fillText("9", -120, 10);
  70. c.fillText("12", -16, -100);
  71. c.stroke();
  73. c.restore();
  74. };
  76. /*绘制时针(h: 当前时（24小时制）)*/
  77. this.drawHourHand = function(h){
  79. h = h === 0? 24: h;
  81. c.save();
  82. c.translate(center.x, center.y);
  83. c.rotate(3/2*Math.PI);
  85. c.rotate(h*hourangle);
  87. c.beginPath();
  88. c.moveTo(0, 0);
  89. c.lineTo(hourHandLength, 0);
  90. c.stroke();
  91. c.restore();
  92. };
  94. /*绘制分针（m: 当前分）*/
  95. this.drawMinHand = function(m){
  97. m = m === 0? 60: m;
  99. c.save();
  100. c.translate(center.x, center.y);
  101. c.rotate(3/2*Math.PI);
  103. c.rotate(m*minangle);
  105. c.beginPath();
  106. c.moveTo(0, 0);
  107. c.lineTo(minHandLength, 0);
  108. c.stroke();
  109. c.restore();
  110. };
  112. /*绘制秒针（s：当前秒）*/
  113. this.drawSecHand = function(s){
  115. s = s === 0? 60: s;
  117. c.save();
  118. c.translate(center.x, center.y);
  119. c.rotate(3/2*Math.PI);
  121. c.rotate(s*minangle);
  123. c.beginPath();
  124. c.moveTo(0, 0);
  125. c.lineTo(secHandLength, 0);
  126. c.stroke();
  127. c.restore();
  128. };
  130. /*依据本机时间绘制时钟*/
  131. this.drawClock = function(){
  132. var me = this;
  134. function draw(){
  135. var date = new Date();
  137. Canvas.clearCxt();
  139. drawBackGround();
  140. drawCenter();
  141. me.drawHourHand(date.getHours() + date.getMinutes()/60);
  142. me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
  143. me.drawSecHand(date.getSeconds());
  144. }
  145. draw();
  146. setInterval(draw, 1000);
  147. };
  148. };
  150. var main = function(){
  151. var clock = new Canvas.Clock();
  152. clock.drawClock();
  153. };
代码中涉及到了一些简单的canvas元素API 大家google一下即可，祝大家学习愉快:-D

    推荐阅读


    上一篇：BufferReader 的使用

    下一篇：java并发之原子操作类(AtomicLong源码分析)和非阻塞算法