[HTML5/Javascript] canvas 바늘시계

결과물

소스 코드

var canvas = document.getElementById('canvas');

var width = canvas.width;

var height = canvas.height;

var g = canvas.getContext('2d');

window.requestAnimFrame = (function() {

   return window.requestAnimationFrame || window.webkitRequestAnimationFrame

          || window.mozRequestAnimationFrame || function(callback) {

              window.setTimeout(callback, 1000 / 60);

          };

})();

var clockObj = function() {

   this.rad = 160; // 시계 반지름

   this.hRad = 100; // 시침 길이

   this.mRad = 150; // 분침 길이

   this.sRad = 150; // 초침 길이

   this.centerX = 162; // 시계 중앙 좌표

   this.centerY = 162; // 시계 중앙 좌표

   this.update = function(date) {

       var milis = date.getMilliseconds();

       // 시,분,초 부드럽게 실수화

       var sec = date.getSeconds() + milis / 1000;

       var min = date.getMinutes() + sec / 60;

       var hour = date.getHours() + min / 60;

       // 12시간 단위로 변경하며 시침 각도 계산

       var hourDegree = (hour > 12 ? hour - 12 : hour) / 12 * 360;

       // 시침 끝 좌표

       this.hourY = this.centerY - this.hRad

              * Math.cos(hourDegree * (Math.PI / 180));

       this.hourX = this.centerX + this.hRad

              * Math.sin(hourDegree * (Math.PI / 180));

       // 분침 끝 좌표

       this.minY = this.centerY - this.mRad

              * Math.cos(min / 60 * 360 * (Math.PI / 180));

       this.minX = this.centerX + this.mRad

              * Math.sin(min / 60 * 360 * (Math.PI / 180));

       // 초침 끝 좌표

       this.secY = this.centerY - this.sRad

              * Math.cos(sec / 60 * 360 * (Math.PI / 180));

       this.secX = this.centerX + this.sRad

              * Math.sin(sec / 60 * 360 * (Math.PI / 180));

   }

}

var clock = new clockObj();

(function animloop() {

   requestAnimFrame(animloop);

   g.clearRect(0, 0, width, height); // 캔바스 클리어

   clock.update(new Date()); // 좌표 업데이트

 

   g.beginPath(); // 새 획

   // 시계 중앙 좌표로 시계 반지름 만큼 360도(2π) 원을 그림

   g.arc(clock.centerX, clock.centerY, clock.rad, 0, 2 * Math.PI);

   g.fillStyle = 'aliceblue'; // 원 채울 색

   g.fill(); // 채움

   g.lineWidth = 4; // 선 굵기

   g.strokeStyle = '#22222'; // 선 색

   g.stroke(); // 선 그림

 

   g.beginPath(); // 새 획, 중앙점에 동그란 원 그림

   g.arc(clock.centerX, clock.centerY, 2, 0, 2 * Math.PI);

   g.lineWidth = 6;

   g.stroke();

 

   g.beginPath(); // 새 획

   g.lineWidth = 4;

   g.moveTo(clock.centerX, clock.centerY); // 중앙부터

   g.lineTo(clock.minX, clock.minY); // 분침끝 좌표까지

   g.stroke(); // 그림

 

   g.beginPath(); // 새 획

   g.lineWidth = 6;

   g.moveTo(clock.centerX, clock.centerY); // 중앙부터

   g.lineTo(clock.hourX, clock.hourY); // 시침 끝 좌표까지

   g.stroke(); // 그림

 

   g.beginPath(); // 새 획

   g.lineWidth = 2;

   g.moveTo(clock.centerX, clock.centerY); // 중앙부터

   g.lineTo(clock.secX, clock.secY); // 초침 끝 좌표까지

   g.stroke(); // 그림

})();

 

코드 미리보기

http://cssdeck.com/labs/clock-3

심심해서 심심풀이로 만든것