You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.5 KiB
113 lines
2.5 KiB
|
|
/**
|
|
* 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');
|
|
|