canvas로 그림을 그리려면 canvas객체의 getContext('2d')를 사용해야 함.
<body>
<canvas class="canvas" width="1000" height="600"></canvas>
</body>
<script>
const canvas = documnet.querySelector('.canvas');
const ctx = canvas.getContext('2d'); //여기까진 기본으로 해줘야 함
// fillRect 채워진 사각형
// clearRect 흰색 사각형(지우개)
// strokeRect 빈사각형
//사각형 그리기
context.fillRect(50,50,100,100) //시작점x,y 너비,높이
context.fillStyle = 'red'//색상 먼저 선택후 (검정색이 default값임)
context.fillRect(0,0,100,100); //시작점x,y에 너비,높이100인 꽉찬 사각형 그림
context.clearRect(80,80,50,50);//너비,높이50만큼의 사각형 모양으로 흰색 사각형 그림(=지운다).
context.strokeRect(150,150,100,100)//텅 빈 사각형
//직선 그리기
context.beginPath(); //펜 사용 시작 알림
context.moveTo(100, 100); //그림의 시작점이 x,y이니 시작점으로 펜을 이동하라는 의미
context.lineTo(300, 200); //시작점에서 x,y 떨어진 지점이 끝점이라는 것을 알림
context.stroke(); //위에서 지정한 경로대로 직선을 그린다.
context.closePath(); // 펜의 사용 끝남 알림
//원 그리기★★★ - 원은 호를 0도부터 360도까지 돌려서 그린다.
//각 인수 설명 -호 중심점의 위치x, y 그리고 반지름크기, 시작각도,끝각도(라디안으로 표기),
//마지막 인수-원 그리는 방향 시계방향(false 기본값)인지 반시계방향(true)인지
context.arc(300, 200, 50, 0, Math.PI*2, false); //Math.PI*2 === 360도
context.stroke();//중심점을 기준으로 반지름 만큼 떨어진 곳에서 시작각도와 끝각도 사이에 선을 그림
</script>
<script>
//반시계방향(true)과 시계방향(false)비교해보기
context.beginPath();
context.arc(500, 100, 50, 0, 140*Math.PI/180 , true);
context.stroke();
//도형을 하나 완성하고 새로운 도형을 그릴 때 beginPath 무조건 해주기 안그럼 한붓그리기 됨
context.beginPath();
context.arc(500, 100, 20, 0, 140*Math.PI/180 , false);
context.stroke();
</script>+)
canvas는 태그에 직접 width, height를 해주는 것과
css에 width, height 값을 주는 것이 다른 태그와는 다르게 작동한다.
예를들어,
canvas태그에 w=1000을 주고 css에 w=500을 준 경우와
canvas태그와 css 모두 w=500을 준 경우 전자에 그림이 더 작게 표현된다.
너비가 1000픽셀인 그림의 너비를 500px인 해상도에 기존의 비율을 유지해서 그리기 때문임
이 방법을 사용하면 고해상도의 디바이스에 그림을 뿌려줘야하는 경우 선명하게 그림을 뿌릴 수 있다.
(예시 - 디바이스 크기의 2배로 캔버스의 크기를 주고, css에는 너비와 높이를 100%로 줌)
'Web > Javascript' 카테고리의 다른 글
| 비구조화 할당 (이터레이터 공부 후 마무리하기) (0) | 2020.04.21 |
|---|---|
| 비슷해 보이는- setTimeout , setInterval, requestAnimationFrame (0) | 2020.04.18 |
| 생성자와 클래스 - p682~ (0) | 2020.03.18 |
| 날짜 정보가 필요할 땐 new Date() (0) | 2020.03.17 |
| 이벤트 전파 (0) | 2020.02.07 |
