你的位置:首页 > 网页设计

[网页设计]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