웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?
1. arc()
2. arcTo()
위의 두 가지 함수 모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 arc()를 사용하는 방법을 알아봅니다.
arc(x, y, radius, startAngle, endAngle, clockwise)
- x, y : 원을 그리게 될 가운데 위치
- radius : 반지름 값
- startAngle : angle 시작점
- endAngle : angle 끝나는 점
- clockwise : 옵션값. 시계 또는 반시계 방향을 결정함(기본값 false인 시계 방향)
! angle값에 따른 위치 알아보기
startAngle과 endAngle은 원을 그릴때 시작하는 값과 끝 값을 나타냅니다. 아래 이미지는 angle값에 따른 위치를 나타내는데 시작점은 0 그리고 끝나는 지점은 Math.PI * 2입니다.
스크린샷) angle 값 설정에 따른 위치
참고로 위 스크린샷처럼 맨 위의 12 방향은 0이 아니라 Math.PI * 1.5의 값을 가지게됩니다. 그렇기때문에 12시 방향에서 시작하려면 0값이 아니라 Math.PI * 1.5를 시작점으로 설정하여야합니다. 이 부분이 혼동되기 쉬운 부분입니다. 동그란 원을 그린다면 문제가 될게 없지만 예를들어 12시에서 3시 방향까지 이어지는 원의 일부를 그린다면 다음처럼 시작과 끝을 설정해야합니다. 아래에서 에제 4번이 바로 이렇게 설정한 예제입니다.
- startAngle : Math.PI * 1.5
- endAngle : Math.PI * 2
그럼 arc() 함수를 사용하는 간단한 예제들을 알아보겠습니다. 아래 예제들을 보고 어떻게 동작하는지 알아봅니다.
아래는 자바스크립트 적용코드입니다.
수행하면 아래와 같이 결과가 나타납니다.
@ 예제 1
ctx.arc(50, 50, 20, 0, Math.PI * 2);
@ 예제 2
ctx.arc(50, 50, 30, 0, Math.PI * 1.5);
@ 예제 3
ctx.arc(50, 50, 30, 0, Mah.PI * 1.5, true);
@ 예제 4 (12시 방향에서 시작)
ctx.arc(100, 100, 35, Math.PI * 1.5, Math.PI * 2);
# 원을 그릴때 Animation 효과 만드는 방법 원을 그릴때 한번에 그리는 것이 아닌 애니메이션~ 천천히 움직이면서 그리는 효과를 만들 경우가 있습니다. 예를들어 원 차트를 그릴때 이런 효과를 사용하면 좋겠죠. 만약 원을 사용하여 애니메이션을 구현하려면 어떻게 할까요?
Canvas 태그에 원을 그릴때도 Animation 효과를 구현할 수 있습니다. 이 때 두 가지 방법으로 구분할 수 있는데 각각 아래와 같습니다.
1. setTimeout() 등의 타이머 함수를 이용하는 방법
2. requestAnimationFrame()을 사용하는 방법
두 가지 방법 모두 사용이 가능합니다. 눈으로 보는 부분에서는 동일하나 requestAnimationFrame() 함수는 브라우저에서 지원하는 방법이므로 다른 방법보다 최적화, CPU나 메모리 등의 리소스 측면에서 더 우수합니다. 만약 animation이 필요한 객체가 굉장히 많다면 나은 성능을 위해서 requestAnimationFrame()이 더 나을 것입니다.
! setTimeout()을 사용하는 방법 알아보기
타이머 함수를 사용하는 방법으로 간단히 설명하면 설정된 시간에 따라 천천히 조금씩 그리는 애니메이션 효과 방법입니다. 간단하게 아래에서 어떻게 동작하는지 알아봅니다. 이번 예제는 0부터 Math.PI * 1.5까지 그리는 예제입니다.
@ animate.js
아래는 위 예제를 실제로 구현하였습니다. 클릭해보세요.
! requestAnimationFrame() 방법 알아보기
이번에 알아볼 requestAnimationFrame() 콜백함수를 계속적으로 동작시키도록 하기 위해서 재귀함수 방법을 사용합니다.
여기까지 원을 캔버스 요소에 그리는 방법을 알아봤습니다. 원의 일부를 그리거나 곡선 등을 그리는 방법으로 arcTo()를 사용합니다. 다음 번에는 곡선을 그리는 방법에 대하여 알아보겠습니다.
# canvas 태그를 사용하여 원 그리는 방법
캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를 사용합니다. arc() 그리고 arcTo()입니다.1. arc()
2. arcTo()
위의 두 가지 함수 모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 arc()를 사용하는 방법을 알아봅니다.
# arc()를 사용하여 원 그리는 방법
arc()를 사용하여 원을 그리는 경우 아래와 같이 사용합니다. 먼저 설정 및 방법을 아래에서 알아보세요.arc(x, y, radius, startAngle, endAngle, clockwise)
- x, y : 원을 그리게 될 가운데 위치
- radius : 반지름 값
- startAngle : angle 시작점
- endAngle : angle 끝나는 점
- clockwise : 옵션값. 시계 또는 반시계 방향을 결정함(기본값 false인 시계 방향)
! angle값에 따른 위치 알아보기
startAngle과 endAngle은 원을 그릴때 시작하는 값과 끝 값을 나타냅니다. 아래 이미지는 angle값에 따른 위치를 나타내는데 시작점은 0 그리고 끝나는 지점은 Math.PI * 2입니다.스크린샷) angle 값 설정에 따른 위치참고로 위 스크린샷처럼 맨 위의 12 방향은 0이 아니라 Math.PI * 1.5의 값을 가지게됩니다. 그렇기때문에 12시 방향에서 시작하려면 0값이 아니라 Math.PI * 1.5를 시작점으로 설정하여야합니다. 이 부분이 혼동되기 쉬운 부분입니다. 동그란 원을 그린다면 문제가 될게 없지만 예를들어 12시에서 3시 방향까지 이어지는 원의 일부를 그린다면 다음처럼 시작과 끝을 설정해야합니다. 아래에서 에제 4번이 바로 이렇게 설정한 예제입니다.
- startAngle : Math.PI * 1.5
- endAngle : Math.PI * 2
그럼 arc() 함수를 사용하는 간단한 예제들을 알아보겠습니다. 아래 예제들을 보고 어떻게 동작하는지 알아봅니다.
! arc() 사용하여 원 그리기 예제보기
아래 예제는 몇 가지 원을 그리는 예제 코드입니다. 각각의 값들에 따라 어떻게 원이 그려지는지 알아보세요.<canvas width="100" height="100"></canvas>
아래는 자바스크립트 적용코드입니다.
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.stroke();
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.stroke();
수행하면 아래와 같이 결과가 나타납니다.
@ 예제 1
ctx.arc(50, 50, 20, 0, Math.PI * 2);
@ 예제 2
ctx.arc(50, 50, 30, 0, Math.PI * 1.5);
@ 예제 3
ctx.arc(50, 50, 30, 0, Mah.PI * 1.5, true);
@ 예제 4 (12시 방향에서 시작)
ctx.arc(100, 100, 35, Math.PI * 1.5, Math.PI * 2);
# 원을 그릴때 Animation 효과 만드는 방법 원을 그릴때 한번에 그리는 것이 아닌 애니메이션~ 천천히 움직이면서 그리는 효과를 만들 경우가 있습니다. 예를들어 원 차트를 그릴때 이런 효과를 사용하면 좋겠죠. 만약 원을 사용하여 애니메이션을 구현하려면 어떻게 할까요?
Canvas 태그에 원을 그릴때도 Animation 효과를 구현할 수 있습니다. 이 때 두 가지 방법으로 구분할 수 있는데 각각 아래와 같습니다.
1. setTimeout() 등의 타이머 함수를 이용하는 방법
2. requestAnimationFrame()을 사용하는 방법
두 가지 방법 모두 사용이 가능합니다. 눈으로 보는 부분에서는 동일하나 requestAnimationFrame() 함수는 브라우저에서 지원하는 방법이므로 다른 방법보다 최적화, CPU나 메모리 등의 리소스 측면에서 더 우수합니다. 만약 animation이 필요한 객체가 굉장히 많다면 나은 성능을 위해서 requestAnimationFrame()이 더 나을 것입니다.
! setTimeout()을 사용하는 방법 알아보기
타이머 함수를 사용하는 방법으로 간단히 설명하면 설정된 시간에 따라 천천히 조금씩 그리는 애니메이션 효과 방법입니다. 간단하게 아래에서 어떻게 동작하는지 알아봅니다. 이번 예제는 0부터 Math.PI * 1.5까지 그리는 예제입니다.<canvas id="myCanvas" width="200" height="200"></canvas>
<button type="button" onclick="animateCircle();">Draw</button>
<button type="button" onclick="animateCircle();">Draw</button>
@ animate.js
animateCircle = function() {
var ctx = document.querySelector('#myCanvas').getContext('2d');
var end = Math.PI * 1.5;
for (var i = 0; i < 100; i++) {
draw(i);
};
function draw(delay) {
setTimeout(function() {
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.arc(100, 100, 50, 0, end / 100 * delay);
ctx.stroke();
}, delay * 10);
}
};
var ctx = document.querySelector('#myCanvas').getContext('2d');
var end = Math.PI * 1.5;
for (var i = 0; i < 100; i++) {
draw(i);
};
function draw(delay) {
setTimeout(function() {
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.arc(100, 100, 50, 0, end / 100 * delay);
ctx.stroke();
}, delay * 10);
}
};
아래는 위 예제를 실제로 구현하였습니다. 클릭해보세요.
! requestAnimationFrame() 방법 알아보기
이번에 알아볼 requestAnimationFrame() 콜백함수를 계속적으로 동작시키도록 하기 위해서 재귀함수 방법을 사용합니다.var start = Math.PI * 1.5 / 100;
animate(start);
function animate(current) {
var ctx = document.querySelector('requestCanvas');
requestAnimationFrame() {
ctx.arc(100, 100, 50, 0, current);
if (current < Math.PI * 1.5) {
current += current;
animate(current);
}
}
}
animate(start);
function animate(current) {
var ctx = document.querySelector('requestCanvas');
requestAnimationFrame() {
ctx.arc(100, 100, 50, 0, current);
if (current < Math.PI * 1.5) {
current += current;
animate(current);
}
}
}
여기까지 원을 캔버스 요소에 그리는 방법을 알아봤습니다. 원의 일부를 그리거나 곡선 등을 그리는 방법으로 arcTo()를 사용합니다. 다음 번에는 곡선을 그리는 방법에 대하여 알아보겠습니다.
아래의 글도 찾고 계시지 않나요?
[자바스크립트] 캔버스에 그라디언트 색 그리는 방법
자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법- [HTML5] 캔버스 영역을 자바스크립트를 사용하여 base64로 저장하기
[HTML5] Canvas 태그에 투명도 opacity 적용하기
[HTML5] canvas 요소에 이미지 추가하기- 캔버스에 곡선 커브를 그리는 방법 및 예제보기
- canvas 기존 스타일 저장 및 불러오기, save() restore()
- CANVAS 태그에 오브젝트, 도형 이동하는 방법