javascript 做的 clock

<html>

<head>

<title>Canvas Clock Demo</title>

<script>

// Wait for the browser to load

window.onload = function() {

// Draw the clock

clock();

// and re-draw the clock every second thereafter

setInterval(clock, 1000);

};

function clock() {

// Get the current date and time

var now = new Date();

var sec = now.getSeconds();

var min = now.getMinutes();

var hr  = now.getHours();

hr = hr >= 12 ? hr – 12 : hr;

// Get the drawing context of the <canvas> element

var ctx = document.getElementById(‘canvas’).getContext(’2d’);

ctx.save();

// Initalize the drawing Canvas

ctx.clearRect(0,0,150,150);

// When we draw at 0,0 we’re actually drawing at 75,75

ctx.translate(75,75);

// Drawing a 100px line actually draws a 40px line

ctx.scale(0.4,0.4);

// Start the cursor rotated at 12:00

ctx.rotate(-Math.PI/2);

// Initalize the drawing properties

ctx.strokeStyle = "black";

ctx.fillStyle = "black";

ctx.lineWidth = 8;

ctx.lineCap = "round";

// Hour marks

ctx.save();

ctx.beginPath();

// For each hour

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

// Rotate the Canvas 1/12th of the way

// (remember: A circle = 2 * PI)

ctx.rotate(Math.PI/6);

// Move the cursor to near the outside of the Canvas

ctx.moveTo(100,0);

// and draw a short (20px) tick

ctx.lineTo(120,0);

}

ctx.stroke();

ctx.restore();

// Minute marks

ctx.save();

// These ticks will be lighter than the hours

ctx.lineWidth = 5;

ctx.beginPath();

// For each minute

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

// except for the minutes that are ‘on the hour’

if ( i % 5 != 0 ) {

// Move the cursor farther out

ctx.moveTo(117,0);

// And draw a short (3px) line

ctx.lineTo(120,0);

}

// Rotate the Canvas 1/60th of the way around

ctx.rotate(Math.PI/30);

}

ctx.stroke();

ctx.restore();

// Draw Hour Hand

ctx.save();

// Rotate the Canvas to the correct position

ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )

// This line is going to be wide

ctx.lineWidth = 14;

ctx.beginPath();

// Start drawing from just off-center (making it look like a clock hand)

ctx.moveTo(-20,0);

// And draw to near the hour ticks

ctx.lineTo(80,0);

ctx.stroke();

ctx.restore();

// Draw Minute Hand

ctx.save();

// Rotate the Canvas to the current minute position

ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )

// This line will be thinner than the hour hand

ctx.lineWidth = 10;

ctx.beginPath();

// But it’s also longer, so set it farther back

ctx.moveTo(-28,0);

// And draw it farther out

ctx.lineTo(112,0);

ctx.stroke();

ctx.restore();

// Draw Second Hand

ctx.save();

// Rotate the Canvas to the current second position

ctx.rotate(sec * Math.PI/30);

// This line will be redish

ctx.strokeStyle = "#D40000";

ctx.fillStyle = "#D40000";

// and thinner than the other hands

ctx.lineWidth = 6;

ctx.beginPath();

// But also set farther back

ctx.moveTo(-30,0);

// But stubbier

ctx.lineTo(83,0);

ctx.stroke();

ctx.restore();

// Outside Blue Circle

ctx.save();

// The border will be wide

ctx.lineWidth = 14;

// and blue-ish

ctx.strokeStyle = ‘#325FA2′;

ctx.beginPath();

// Draw a complete circle, 142px out

ctx.arc(0,0,142,0,Math.PI*2,true);

ctx.stroke();

ctx.restore();

ctx.restore();

}

</script>

</head>

<body>

<canvas id="canvas" height="150" width="150"></canvas>

</body>

</html>

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>