캔버스 시계
이 장에서는 HTML 캔버스를 사용하여 아날로그 시계를 만들 것입니다.
1부 - 캔버스 만들기
시계에는 HTML 컨테이너가 필요합니다. HTML 캔버스 만들기:
HTML 코드:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>
</body>
</html>
코드 설명
페이지에 HTML <canvas> 요소를 추가합니다.
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
HTML 캔버스 요소에서 캔버스 객체(var canvas)를 만듭니다.
var canvas =
document.getElementById("canvas");
캔버스 개체에 대한 2D 그리기 개체(var ctx)를 만듭니다.
var ctx = canvas.getContext("2d");
캔버스 높이를 사용하여 시계 반경을 계산합니다.
var radius
= canvas.height / 2;
캔버스 높이를 사용하여 시계 반경을 계산하면 모든 캔버스 크기에서 시계가 작동합니다.
(0,0) 위치(그리기 개체의)를 캔버스 중앙에 다시 매핑합니다.
ctx.translate(radius, radius);
시계 반경을 90%로 줄여 캔버스 내부에 시계를 잘 그립니다.
radius = radius * 0.90;
시계를 그리는 함수를 만듭니다.
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}