반응형
기본 세팅 링크: https://schwhitezer.tistory.com/30
자바스크립트 Canvas - 시작 세팅
자바스크립트 Canvas로 웹 2D 게임이나 시각 효과를 낼 수 있다. html 파일 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> Javascript Canvas C..
schwhitezer.tistory.com
알림: HTML, 자바스크립트 캔버스 기본 세팅 완료 후 원활한 코딩 가능.
arc() 함수로 간단한 원 그리기
|
1
2
3
4
5
6
7
8
|
// 원 그리기 시작
ctx.beginPath();
// (x, y, 반지름, 시작 각도, 끝나는 각도, 시계 반대 방향으로 그리기?)
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
// 색 채우기
ctx.fill();
// 윤곽선 그리기
ctx.stroke();
|
cs |
여기서 포인트는 시작 각도를 0 그리고 끝나는 각도를 원주율 2배로 입력하면 완벽한 원 완성.
이번엔 색 바꾼 원
|
1
2
3
4
5
6
7
|
ctx.fillStyle = 'yellow';
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
|
cs |
반응형
'코딩 > Javascript' 카테고리의 다른 글
| 자바스크립트 call() apply() 차이 (0) | 2022.01.08 |
|---|---|
| 자바스크립트 bind() 사용법 (0) | 2022.01.07 |
| 자바스크립트 Canvas - 선 그리기 (0) | 2021.12.02 |
| 자바스크립트 Canvas - strokeRect() fillRect() 크기 문제 해결 (0) | 2021.12.01 |
| 자바스크립트 Canvas - fillRect() 함수로 직사각형 & 정사각형 그리기 (0) | 2021.11.30 |
