Html5绘制时钟

最近在对Html5比较感兴趣，就用空闲时间做一些小例子进行练习，今天绘制一个走动的时钟，具体如下图所示：

具体思路在上图已有说明，代码如下：

  1 <script type="text/javascript">
  2 
  3         //绘制圆形的弧度，ctx 为绘制环境，x,y为绘制中心，r为绘制半径，st为起始弧度，end为结束弧度
  4         function circle(ctx, x, y, r, st, end, w) {
  5             ctx.lineWidth = w;
  6             ctx.beginPath();
  7             ctx.moveTo(x, y);
  8             ctx.arc(x, y, r, st, end, true);
  9             ctx.stroke();
 10         }
 11 
 12         //画一个白色的圆，用以覆盖
 13         function circle0(ctx, x, y, r, st, end) {
 14             ctx.fillStyle = "#ffffff";
 15             ctx.beginPath();
 16             ctx.arc(x, y, r, st, end, true);
 17             ctx.fill();
 18         }
 19         function circle1(ctx, x, y, r, st, end, w) {
 20             ctx.strokeStyle = "gray";
 21             ctx.lineWidth = w;
 22             ctx.beginPath();
 23             ctx.arc(x, y, r, st, end, true);
 24             ctx.stroke();
 25         }
 26 
 27         //绘制时钟用的线
 28         function line(ctx, x1, y1, x2, y2, w) {
 29             if (w == 1) {
 30                 ctx.strokeStyle = "red";
 31             } else if (w == 2) {
 32                 ctx.strokeStyle = "blue";
 33             } else {
 34                 ctx.strokeStyle = "black";
 35             }
 36             ctx.lineWidth = w;
 37             ctx.beginPath();
 38             ctx.moveTo(x1, y1);
 39             ctx.lineTo(x2, y2);
 40             ctx.stroke();
 41         }
 42         function drawClock() {
 43             var c = document.getElementById("myCanvas");
 44             var ctx = c.getContext("2d");
 45             ctx.clearRect(0, 0, c.width, c.height);
 46             //绘制一个钟表
 47             var cX = 300;
 48             var cY = 200;
 49             var radius = 100;
 50 
 51             //绘制分与秒的刻度
 52             for (var i = 0; i < 60; i++) {
 53                 circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
 54             }
 55             circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
 56             //绘制时刻度
 57             for (var i = 0; i < 12; i++) {
 58                 circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
 59             }
 60             circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true);
 61 
 62             //外围再画一圈
 63             circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
 64             ctx.save();
 65             ctx.fillStyle = "black";
 66             ctx.font = "10px Arial";
 67             //在钟表的周围画上数字
 68             for (var i = 0; i < 12; i++) {
 69                 var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
 70                 var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
 71                 ctx.fillText((i + 1), fX, fY);
 72             }
 73             var date = new Date();
 74             var second = date.getSeconds();
 75             var minute = date.getMinutes();
 76             var hour = date.getHours();
 77             hour = hour % 12; //采用12小时制
 78 
 79 
 80             var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
 81             var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
 82             var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
 83             var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
 84             //小时为了准确起见，应该要加上分的弧度
 85             var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
 86             var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
 87             //画秒针，红色
 88             line(ctx, cX, cY, secondX, secondY, 1);
 89             //画分针，蓝色
 90             line(ctx, cX, cY, minuteX, minuteY, 2);
 91             //画时针，黑色
 92             line(ctx, cX, cY, hourX, hourY, 3);
 93             ctx.fillStyle = "black";
 94             ctx.font = "15px Arial";
 95             ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
 96             ctx.save();
 97         }
 98         window.onload = function () {
 99             //循环，1s一次，且要在加载完才可以开始，否则会出现找不到对象的异常
100             setInterval(drawClock, 1000);
101         }
102     </script>
View Code

 

posted @ 2016-11-26 00:08  老码识途呀  阅读(3247)  评论(0)  编辑  收藏  举报