Skip to content

Instantly share code, notes, and snippets.

@devyn

devyn/canvas-clock.html

Created November 12, 2009 05:16
Show Gist options
  • Save devyn/232622 to your computer and use it in GitHub Desktop.
Save devyn/232622 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas-clock.html
<html>
<head>
<title>fast forward, clock</title>
<script src="canvas-animation.js"></script>
<script>
var anim;
function init() {
anim = new Animation('canvas', 45);
anim.drawing.clockBase = function(ctx, frame) {
ctx.save();
ctx.fillStyle = "#cceeff";
ctx.lineWidth = 10;
ctx.translate(75,75);
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI*2, false);
ctx.stroke();
ctx.fill();
ctx.restore();
};
anim.drawing.hour = function(ctx, frame) {
ctx.save();
ctx.strokeStyle = "#333333";
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.translate(75,75);
ctx.rotate((Math.PI/180) * (frame/100 % 360));
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,24);
ctx.stroke();
ctx.restore();
};
anim.drawing.minute = function(ctx, frame) {
ctx.save();
ctx.strokeStyle = "#333333";
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.translate(75,75);
ctx.rotate((Math.PI/180) * (frame/100*60 % 360));
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,48);
ctx.stroke();
ctx.restore();
};
anim.drawing.second = function(ctx, frame) {
ctx.save();
ctx.strokeStyle = "#dd0000";
ctx.lineWidth = 5;
ctx.lineCap = "square";
ctx.translate(75,75);
ctx.rotate((Math.PI/180) * (frame/100*(60*60) % 360));
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,48);
ctx.stroke();
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(0,48,5,0,Math.PI*2,false);
ctx.stroke();
ctx.restore();
};
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment