HTML5之canvas 钟表基础教程

  1 <html>
  2     <head>
  3         <meta charset="UTF-8">
  4         <title></title>
  5         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6     </head>
  7     <body>
  8         <canvas id="canvas" width="500" height="500"></canvas>
  9         <script type="text/javascript">
 10             var oCanvas = document.getElementById("canvas");
 11             var context = oCanvas.getContext("2d");
 12 
 13             function draw() {
 14                 //清除画布
 15                 context.clearRect(0, 0, 500, 500);
 16                 //背景
 17                 context.fillStyle = "#ffed00";
 18                 context.fillRect(0, 0, 500, 500);
 19                 //表盘
 20                 context.strokeStyle = "#000"
 21                 context.lineWidth = 5;
 22                 context.beginPath();
 23                 context.arc(250, 250, 200, 0, 360, false);
 24                 context.stroke();
 25                 context.closePath();
 26                 //分针刻度
 27                 context.save();
 28                 context.translate(250, 250);
 29                 for(var i = 0; i < 60; i++) {
 30                     context.rotate(Math.PI / 30)
 31                     context.beginPath();
 32                     context.moveTo(0, -180);
 33                     context.lineTo(0, -190);
 34                     context.stroke();
 35                     context.closePath();
 36                 }
 37                 context.restore();
 38                 //获取时间
 39                 var now = new Date();
 40                 var hour = now.getHours();
 41                 var min = now.getMinutes();
 42                 var sec = now.getSeconds();
 43                 hour= hour+min/60;
 44                 min= min+sec/60;
 45                 //时针刻度
 46                 context.save();
 47                 context.translate(250, 250);
 48                 for(var i = 0; i < 60; i++) {
 49                     context.rotate(Math.PI / 6)
 50                     context.beginPath();
 51                     context.moveTo(0, -170);
 52                     context.lineTo(0, -190);
 53                     context.stroke();
 54                     context.closePath();
 55                 }
 56                 context.restore();
 57                 //时针
 58                 context.save();
 59                 context.beginPath();
 60                 context.translate(250, 250);
 61                 context.rotate(Math.PI / 6*hour);
 62                 context.moveTo(0, 10);
 63                 context.lineWidth = 7;
 64                 context.lineTo(0, -140);
 65                 context.stroke();
 66                 context.closePath();
 67                 context.restore();
 68                 //分针
 69                 context.save();
 70                 context.beginPath();
 71                 context.translate(250, 250);
 72                 context.rotate(Math.PI / 30*min);
 73                 context.moveTo(0, 15);
 74                 context.lineWidth = 5;
 75                 context.lineTo(0, -160);
 76                 context.stroke();
 77                 context.closePath();
 78                 context.restore();
 79                 //秒针
 80                 context.save();
 81                 context.translate(250, 250);
 82                 context.rotate(Math.PI / 30 * sec);
 83                 context.beginPath();
 84                 context.strokeStyle = "red";
 85                 context.lineWidth = 3;
 86                 context.moveTo(0, 20);
 87                 context.lineTo(0, -185);
 88                 context.stroke();
 89                 context.closePath();
 90                 context.beginPath();
 91                 context.strokeStyle = "red";
 92                 context.fillStyle = "#FFFFFF";
 93                 context.lineWidth = 5;
 94                 context.arc(0, 0, 3, 0, 2 * Math.PI);
 95                 context.stroke();
 96                 context.fill();
 97                 context.closePath();
 98                 context.beginPath();
 99                 context.strokeStyle = "red";
100                 context.fillStyle = "#FFFFFF";
101                 context.lineWidth = 5;
102                 context.arc(0, -160, 3, 0, 2 * Math.PI);
103                 context.stroke();
104                 context.fill();
105                 context.closePath();
106                 context.restore();
107             };
108             //先画一遍
109             draw();
110             //setInterval
111             setInterval(draw, 1000);
112         </script>
113     </body>
114 
115 </html>