Canvas基礎学習(一)——簡単なクロック表示を実現する

35929 ワード

HTML 5の最も人気のある機能は要素です.この要素はページに領域を設定し、JavaScriptでこの領域にグラフィックを動的に描画することができます.要素のいくつかの基本的な使い方については、w3schoolを参照してください.
午後の時間をかけて下でよく使うAPIを熟知して、下のネット上のいくつかのdemoを参考にして、簡単な時計の表示を実現して、コードの記録は以下の通りです:
  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>canvas-clock</title>

  6     <style type="text/css">

  7         /* canvas drawing */

  8         .clock {

  9             width: 300px;

 10             margin: 0 auto;

 11         }

 12         #clock {

 13             width: 300px;

 14             height: 300px;

 15         }

 16     </style>

 17     <script type="text/javascript">

 18         var clockDraw = function(context) {

 19             var now = new Date();

 20             context.save();

 21             context.clearRect(0, 0, 300, 300);

 22             context.scale(1, 0.5);

 23             context.translate(150, 150);

 24 

 25             // init hours  

 26             context.save();

 27             for (var i = 0; i < 12; i++ ) {

 28                 context.beginPath();

 29                 context.rotate(Math.PI / 6);

 30                 context.moveTo(0, -123);

 31                 context.lineWidth = 5;

 32                 context.lineTo(0, -110);

 33                 context.stroke();

 34             }

 35             context.restore();

 36 

 37             // init minutes

 38             context.save();

 39             context.lineWidth = 5;

 40             for (i = 0; i < 60; i++) {

 41                 if (i % 5 != 0) {

 42                     context.beginPath();

 43                     context.moveTo(0, 118);

 44                     context.lineWidth = 2;

 45                     context.lineTo(0, 115);

 46                     context.stroke();

 47                 }

 48                 context.rotate(Math.PI / 30);

 49             }

 50             context.restore();

 51 

 52             var sec = now.getSeconds();

 53             var min = now.getMinutes();

 54             var hr  = now.getHours();

 55             hr = hr >= 12 ? hr - 12 : hr;

 56 

 57             context.fillStyle = "black";

 58 

 59             // draw hour  

 60             context.save();

 61             context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);

 62             context.lineWidth = 7;

 63             context.beginPath();

 64             context.moveTo(0, 10);

 65             context.lineTo(0, -80);

 66             context.stroke();

 67             context.restore();

 68 

 69             // draw minute

 70             context.save();

 71             context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);

 72             context.lineWidth = 5;

 73             context.beginPath();

 74             context.moveTo(0, 20);

 75             context.lineTo(0, -100);

 76             context.stroke();

 77             context.restore();

 78 

 79             // draw second

 80             context.save();

 81             context.rotate(sec * Math.PI / 30);

 82             context.strokeStyle = "#D40000";

 83             context.fillStyle = "#D40000";

 84             context.lineWidth = 4;

 85             context.beginPath();

 86             context.moveTo(0, 30);

 87             context.lineTo(0, -113);

 88             context.stroke();

 89             context.beginPath();

 90             context.arc(0, 0, 5, 0, Math.PI * 2, false);

 91             context.fill();

 92             context.restore();

 93 

 94             context.beginPath();

 95             context.arc(0, 0, 125, 0, Math.PI * 2, false);

 96             context.lineWidth = 5;

 97             context.strokeStyle = '#325FA2';

 98             context.stroke();

 99 

100             context.restore();

101         };

102 

103         var initClock = function() {

104             var clock = document.getElementById("clock");

105             if (clock.getContext) {

106                 var context = clock.getContext("2d");

107                 clockDraw(context);

108                 setInterval((function() {

109                     return function() {

110                         clockDraw(context);

111                     }

112                 })(context), 1000);

113             };

114         };

115 

116         window.onload = function() {

117             //canvas drawing

118             initClock();

119         };

120     </script>

121 </head>

122 <body>

123     <div class="clock">

124         <canvas id="clock">A drawing of clock.</canvas>

125     </div>

126 </body>

127 </html>