Permalink
Browse files

Added live-clock.js example

  • Loading branch information...
1 parent ca54b2e commit 885ffc8dd34592a19398efb9be5077c1f089bd14 @tj tj committed Nov 4, 2010
Showing with 113 additions and 0 deletions.
  1. +113 −0 examples/live-clock.js
View
@@ -0,0 +1,113 @@
+
+/**
+ * Module dependencies.
+ */
+
+var Canvas = require('../lib/canvas')
+ , canvas = new Canvas(320, 320)
+ , ctx = canvas.getContext('2d')
+ , http = require('http');
+
+function getX(angle) {
+ return -Math.sin(angle + Math.PI);
+}
+function getY(angle) {
+ return Math.cos(angle + Math.PI);
+}
+
+function clock(ctx){
+ var now = new Date();
+ ctx.clearRect(0,0,320,320);
+
+ ctx.save();
+ ctx.translate(160,160);
+ ctx.beginPath();
+ ctx.lineWidth = 14;
+ ctx.strokeStyle = '#325FA2';
+ ctx.fillStyle = '#eeeeee';
+ ctx.arc(0,0,142,0,Math.PI*2,true);
+ ctx.stroke();
+ ctx.fill();
+
+ ctx.strokeStyle = '#000000';
+ // Hour marks
+ ctx.lineWidth = 8;
+ for (var i=0;i<12;i++){
+ var x = getX(Math.PI/6*i);
+ var y = getY(Math.PI/6*i);
+ ctx.beginPath();
+ ctx.moveTo(x*100,y*100);
+ ctx.lineTo(x*125,y*125);
+ ctx.stroke();
+ }
+
+ // Minute marks
+ ctx.lineWidth = 5;
+ for (i=0;i<60;i++){
+ if (i%5!=0) {
+ var x = getX(Math.PI/30*i);
+ var y = getY(Math.PI/30*i);
+ ctx.beginPath();
+ ctx.moveTo(x*117,y*117);
+ ctx.lineTo(x*125,y*125);
+ ctx.stroke();
+ }
+ }
+
+ var sec = now.getSeconds();
+ var min = now.getMinutes();
+ var hr = now.getHours();
+ hr = hr>=12 ? hr-12 : hr;
+
+ ctx.fillStyle = "black";
+
+ // write Hours
+ var x = getX(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
+ var y = getY(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
+ ctx.lineWidth = 14;
+ ctx.beginPath();
+ ctx.moveTo(x*-20,y*-20);
+ ctx.lineTo(x*80,y*80);
+ ctx.stroke();
+
+ // write Minutes
+ var x = getX((Math.PI/30)*min + (Math.PI/1800)*sec);
+ var y = getY((Math.PI/30)*min + (Math.PI/1800)*sec);
+
+ ctx.lineWidth = 10;
+ ctx.beginPath();
+ ctx.moveTo(x*-28,y*-28);
+ ctx.lineTo(x*112,y*112);
+ ctx.stroke();
+
+ // Write seconds
+ var x = getX(sec * Math.PI/30);
+ var y = getY(sec * Math.PI/30);
+ ctx.strokeStyle = "#D40000";
+ ctx.fillStyle = "#D40000";
+ ctx.lineWidth = 6;
+ ctx.beginPath();
+ ctx.moveTo(x*-30,y*-30);
+ ctx.lineTo(x*83,y*83);
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.arc(0,0,10,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.beginPath();
+ ctx.arc(x*95,y*95,10,0,Math.PI*2,true);
+ ctx.stroke();
+ ctx.fillStyle = "#555";
+ ctx.arc(0,0,3,0,Math.PI*2,true);
+ ctx.fill();
+
+ ctx.restore();
+}
+
+http.createServer(function (req, res) {
+ clock(ctx);
+ res.writeHead(200, { 'Content-Type': 'text/html' });
+ res.end(''
+ + '<meta http-equiv="refresh" content="1;" />'
+ + '<img src="' + canvas.toDataURL() + '" />');
+}).listen(3000);
+console.log('Server started on port 3000');

0 comments on commit 885ffc8

Please sign in to comment.