<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Analog clock by Javascript feat. HTML5</title> </head> <body> <canvas id="clock" width="300" height="300">現在お使いのブラウザはCanvas要素をサポートしていません。</canvas> <script type="text/javascript"> <!-- var canvas = document.getElementById('clock'); main(); function main() { if(canvas.getContext) { clock(); setInterval('clock()', 1000); } } function clock() { var context = canvas.getContext('2d'); context.save(); context.clearRect(0, 0, 300, 300); context.translate(150, 150); context.scale(1.5, 1.5); context.rotate( - Math.PI / 2 ); context.save(); // dial plate context.strokeStyle = "gray"; context.fillStyle = "white"; context.lineWidth = 4; context.lineCap = "round"; context.beginPath(); for (var i=0; i<12; i++) { context.rotate( Math.PI / 6 ); context.moveTo(60, 0); context.lineTo(70 + ( (i%3 == 2) ? 6 : 0 ), 0); } context.stroke(); context.restore(); context.save(); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); hour = (hour >= 12) ? (hour - 12) : hour; // hour hand context.strokeStyle = "black"; context.fillStyle = "black"; // calculating formula for the angle of the hour hand // ( 2 * Math.PI / 12 ) * hour + ( ( 2 * Math.PI / 12 ) / 60 ) * minute + ( ( ( 2 * Math.PI / 12 ) / 60 ) / 60 ) * second context.rotate( ( Math.PI / 6 ) * hour + ( Math.PI / 360 ) * minute + ( Math.PI / 21600 ) * second ); context.lineWidth = 8; context.lineCap = "round"; context.beginPath(); context.moveTo(-10, 0); context.lineTo(45, 0); context.stroke(); context.restore(); context.save(); // minute hand context.strokeStyle = "black"; context.fillStyle = "black"; // calculating formula for the angle of the minute hand // ( 2 * Math.PI / 60 ) * minute + ( ( 2 * Math.PI / 60 ) / 60 ) * second context.rotate( ( Math.PI / 30 ) * minute + ( Math.PI / 1800 ) * second ); context.lineWidth = 6; context.lineCap = "round"; context.beginPath(); context.moveTo(-14, 0); context.lineTo(62, 0); context.stroke(); context.restore(); context.save(); // second hand context.strokeStyle = "red"; context.fillStyle = "red"; // calculating formula for the angle of the second hand // ( 2 * Math.PI / 60 ) * second context.rotate( Math.PI / 30 * second ); context.lineWidth = 4; context.lineCap = "round"; context.beginPath(); context.moveTo(-15, 0); context.lineTo(70, 0); context.stroke(); context.restore(); // frame context.beginPath(); context.lineWidth = 12; context.strokeStyle = "green"; context.arc(0, 0, 90, 0, Math.PI * 2, true); context.stroke(); context.restore(); } //--> </script> </body> </html> |
1. Firefox
2.Google Chrome
3. Opera
4. Internet Explorer Platform Preview ( IE9 Preview )
IE9 (Preview) does NOT support Canvas element YET.
(Though, I saw an article on the Internet, Microsoft wanted to separate the Canvas 2D API from HTML5.)
Anyway, the combination of HTML5 and Japascript would provide us to easily create a lot of Rich Internet Applications as if Flash.
By the way, separating between Javascript(external file) and HTML is better than the above code.
Plus, I re-coded Javascript to adjust the Clock size to the size of the canvas.
Clock.js
| function Clock(id) { this.id = id; this.canvas = document.getElementById(id); if(this.canvas.getContext) { this.context = this.canvas.getContext('2d'); this.centerX = this.canvas.width / 2; this.centerY = this.canvas.height / 2; this.clocksize = 0; this.hour = 0; this.minute = 0; this.second = 0; this.CanStartClock = true; } } Clock.prototype = { Draw:function () { if(this.canvas.getContext) { this.Init(); this.DrawDialplate(); this.DrawHourHand(); this.DrawMinuteHand(); this.DrawSecondHand(); this.DrawFrame(); } }, Init:function() { var now = new Date(); var hour24 = now.getHours(); this.hour = (hour24 >= 12) ? (hour24 - 12) : hour24; this.minute = now.getMinutes(); this.second = now.getSeconds(); this.clocksize = this.canvas.width > this.canvas.height ? this.canvas.height : this.canvas.width; this.canvas.width = this.canvas.width; this.canvas.height = this.canvas.height; this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.translate(this.centerX, this.centerY); this.context.scale(1.5, 1.5); this.context.rotate( - Math.PI / 2 ); this.context.save(); }, DrawDialplate:function() { this.context.strokeStyle = "gray"; this.context.fillStyle = "white"; this.context.lineWidth = this.clocksize * 0.005; this.context.lineCap = "round"; this.context.beginPath(); for (var i=0; i<12; i++) { this.context.rotate( Math.PI / 6 ); this.context.moveTo(this.clocksize * 0.22, 0); this.context.lineTo((this.clocksize * 0.25),0); } this.context.stroke(); this.context.restore(); this.context.save(); }, DrawHourHand:function() { this.context.strokeStyle = "black"; this.context.fillStyle = "black"; this.context.rotate( ( Math.PI / 6 ) * this.hour + ( Math.PI / 360 ) * this.minute + ( Math.PI / 21600 ) * this.second ); this.context.lineWidth = this.clocksize * 0.025 ; this.context.lineCap = "round"; this.context.beginPath(); this.context.moveTo( - this.clocksize / 60, 0); this.context.lineTo(this.clocksize / 6.5, 0); this.context.stroke(); this.context.restore(); this.context.save(); }, DrawMinuteHand:function() { this.context.strokeStyle = "black"; this.context.fillStyle = "black"; this.context.rotate( ( Math.PI / 30 ) * this.minute + ( Math.PI / 1800 ) * this.second ); this.context.lineWidth = this.clocksize * 0.015; this.context.lineCap = "round"; this.context.beginPath(); this.context.moveTo( - this.clocksize / 60, 0); this.context.lineTo(this.clocksize / 4.8, 0); this.context.stroke(); this.context.restore(); this.context.save(); }, DrawSecondHand:function() { this.context.strokeStyle = "red"; this.context.fillStyle = "red"; this.context.rotate( Math.PI / 30 * this.second ); this.context.lineWidth = this.clocksize * 0.01; this.context.lineCap = "round"; this.context.beginPath(); this.context.moveTo( - this.clocksize / 40, 0); this.context.lineTo(this.clocksize / 4.2, 0); this.context.stroke(); this.context.restore(); this.context.save(); }, DrawFrame:function() { this.context.beginPath(); this.context.lineWidth = this.clocksize / 40; this.context.strokeStyle = "green"; this.context.arc(0, 0, (this.clocksize / 3.5), 0, Math.PI * 2, true); this.context.stroke(); this.context.restore(); this.context.save(); } } |
Clock.html
| <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Analog clock by Javascript feat. HTML5</title> <script type="text/javascript" src="Clock.js"></script> </head> <body> <canvas id="clock" width="300" height="300">現在お使いのブラウザはCanvas要素をサポートしていません。</canvas> <script type="text/javascript"> <!-- clock = new Clock('clock'); Main = function() { clock.Draw(); setTimeout(this.Main, 100); } Main(); --> </script> </body> </html> |
No comments:
Post a Comment