현재 시간을 가져와 이미지 시계 나타내기
현재 시간을 받아와서 canvas로 시계,시침,분침,초침 이미지를 가져와 시간이 지날 때마다 침 이미지를 그려준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// canvas에 들어갈 이미지 정의
var context;
var dialImg = new Image();
var hourImg = new Image();
var minImg = new Image();
var secImg = new Image();
// 이미지 로딩하기
dialImg.src = "image/dial.png";
hourImg.src = "image/pin_3.png";
minImg.src = "image/pin_2.png";
secImg.src = "image/pin_1.png";
// 시침, 분침, 초침이 돌아간 각도 -> 각도를 계산하기 위한 변수
// 0.0으로 주는 것은 자동으로 실수형 주기 위함
var rHour = 0.0, rMin = 0.0, rSec = 0.0;
// 화면의 정중앙의 좌표
var centerX, centerY;
var cnt = 0;
window.onload = function() {
// canvas 객체
var canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// canvas 정중앙의 좌표
//centerX = 300/2;
//centerY = 300/2;
centerX = canvas.width/2;
centerY = canvas.height/2;
// 반복적으로 함수 호출 -> 숫자가 적으면 적을수록 호출을 빨리한다.
setInterval(showTime, 50);
}
function showTime() {
// 현재 시간, 분, 초를 보여준다.
var d = new Date();
var hour = d.getHours(); // 현재 시간
var min = d.getMinutes(); // 현재 분
var sec = d.getSeconds(); // 현재 초
// 초침이 돌아간 각도를 360분법의 각도로 얻어오기
rSec = 6*sec;
rMin = 6*min + 6*(rSec/360);
rHour = 30*hour + 30*(rMin/360);
// 각을 rad 단위로 환산해서 변수에 대입
rSec = rSec*(Math.PI/180);
rMin = rMin*(Math.PI/180);
rHour = rHour*(Math.PI/180);
// 화면에 그리는 함수 호출
drawCanvas();
log(hour+"시 "+min+"분 "+sec+"초");
}
function drawCanvas() {
// 시계 다이얼 그리기
context.drawImage(dialImg, centerX-150, centerY-150, 300, 300);
context.save(); // 현재 canvas 상태를 저장
// 초침 그리기
context.translate(centerX, centerY); // 평행 이동
context.rotate(rSec); // 초침이 돌아간 만큼 회전
context.drawImage(secImg, -10, -130+10, 20, 130);
context.restore(); // 저장했던 상태로 원상복구
context.save(); // 저장
// 분침 그리기
context.translate(centerX, centerY); // 평행 이동
context.rotate(rMin); // 분침이 돌아간 만큼 회전
context.drawImage(minImg, -10, -130+10, 20, 130);
context.restore(); // 저장했던 상태로 원상복구
context.save(); // 저장
// 시침 그리기
context.translate(centerX, centerY); // 평행 이동
context.rotate(rHour); // 분침이 돌아간 만큼 회전
context.drawImage(hourImg, -10, -130+10, 20, 130);
context.restore(); // 저장했던 상태로 원상복구
context.save(); // 저장
}
function log(msg) {
var console = document.getElementById("console");
console.innerHTML = msg + "<br/>";
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<!-- 시간 출력 -->
<div id="console" style="width:500px; border:2px solid red; font-size:13pt; text-align:center;"></div>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] cross message (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] message event (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] drag & drop 예제 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] audio와 video 예제 (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] canvas (0) | 2019.05.21 |
