一个基于HTML5的CANVAS时钟的小栗子 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>canvas</title>
  5 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
  6 <script>
  7 /*
  8 CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sAngle, eAngle)
  9 {
 10     this.save();
 11 
 12     this.beginPath();
 13     this.moveTo(x, y);
 14     this.arc(x, y, radius, sAngle, eAngle);
 15     this.closePath();
 16 
 17     this.restore();
 18 
 19     return this;
 20 }
 21 */
 22 
 23 CanvasRenderingContext2D.prototype.circle = function (x, y, radius)
 24 {
 25     this.save();
 26 
 27     this.beginPath();
 28     this.arc(x, y, radius, 0, 2 * Math.PI);
 29     this.closePath();
 30 
 31     this.restore();
 32 
 33     return this;
 34 }
 35 
 36 CanvasRenderingContext2D.prototype.angleLineTo = function (x, y, length, angle, angleOffset)
 37 {
 38     this.save();
 39 
 40     this.beginPath();
 41     this.translate(x, y);
 42     this.rotate(angle);
 43     this.moveTo(angleOffset, 0);
 44     this.lineTo(length, 0);
 45 
 46     this.restore();
 47 
 48     return this;
 49 }
 50 </script>
 51 <script>
 52 $(function()
 53 {
 54     setInterval(
 55         function()
 56         {
 57             var myDate = new Date();
 58             var hours = myDate.getHours();
 59             var minutes = myDate.getMinutes();
 60             var seconds = myDate.getSeconds();
 61 
 62             hours = (hours >= 12) ? (hours - 12) : hours;
 63 
 64             (function(hAngle, mAngle, sAngle)
 65             {
 66                 var myCanvas = document.getElementById("myCanvas");
 67 
 68                 var xCenter = myCanvas.width / 2;
 69                 var yCenter = myCanvas.height / 2;
 70 
 71                 var length = xCenter - 1;
 72 
 73                 var hLength = length * 0.6;
 74                 var mLength = length * 0.8;
 75                 var sLength = length * 0.9;
 76 
 77                 var context = myCanvas.getContext("2d");
 78                 context.clearRect(0, 0, myCanvas.width, myCanvas.height);
 79 
 80                 /// 画表盘
 81                 context.fillStyle="#EEE";
 82                 context.circle(xCenter, yCenter, length, 0, 2 * Math.PI).fill();
 83                 
 84                 context.lineWidth = 2;
 85                 context.strokeStyle="#666";
 86                 context.stroke();
 87                 
 88                 for (var i = 0; i < 60; i++)
 89                 {
 90                     context.lineWidth = 1;
 91                     context.angleLineTo(xCenter, yCenter, length - 2, i / 60 * 2 * Math.PI, length - 4).stroke();
 92                 }
 93                 
 94                 for (var i = 0; i < 12; i++)
 95                 {
 96                     context.lineWidth = 2;
 97                     context.angleLineTo(xCenter, yCenter, length - 2, i / 12 * 2 * Math.PI, length - 10).stroke();
 98                 }
 99 
100                 /// 画时针
101                 context.strokeStyle="#444";
102                 context.lineWidth = 2;
103                 context.angleLineTo(xCenter, yCenter, hLength, hAngle, 0).stroke();
104 
105                 /// 画分针
106                 context.strokeStyle="#444";
107                 context.lineWidth = 2;
108                 context.angleLineTo(xCenter, yCenter, mLength, mAngle, 0).stroke();
109 
110                 /// 画秒针
111                 context.strokeStyle="#666";
112                 context.lineWidth = 1;
113                 context.angleLineTo(xCenter, yCenter, sLength, sAngle, -sLength * 0.2).stroke();
114 
115                 /// 画表针中心点
116                 context.fillStyle="#666";
117                 context.circle(xCenter, yCenter, 4).fill();
118 
119             })(
120                 ((hours + (minutes / 60)) / 12.0 * 2 - 0.5) * Math.PI,
121                 (minutes / 60.0 * 2 - 0.5) * Math.PI,
122                 (seconds / 60.0 * 2 - 0.5) * Math.PI
123             );
124         },
125         1000
126     );
127 })
128 </script>
129 </head>
130 <body>
131 <canvas id="myCanvas" width="200" height="200">
132 Your browser does not support the canvas element.
133 </canvas>
134 </body>
135 </html>

 

posted on 2018-02-26 14:30  tianjun9  阅读(179)  评论(0)    收藏  举报