https://github.com/2taesung/JSOfficialDoc.git
2D 캔버스 기초
단순한 직사각형
- 예를 들어 를 사용하여 반투명 색상을 지정하여 반투명 그래픽을 그릴 수 있습니다 rgba(). a은 "알파 채널"또는 색상이 투명성의 양이라고 어떤 값을 정의합니다. 값이 높을수록 뒤에 있는 것이 무엇이든 더 많이 가립니다. 코드에 다음을 추가합니다.
=> 레드, 그린, 블루, 알파(투명성)
획 및 선 너비
- 획의 기본 너비는 1픽셀입니다. lineWidth속성 값을 조정하여 변경할 수 있습니다(획 너비의 픽셀 수를 나타내는 숫자가 필요함). 이전 두 줄 사이에 다음 줄을 추가합니다.
ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.strokeRect(25, 25, 175, 200);ctx.lineWidth = 5;=> lineWidth 코드를 위의 코두 두 줄 사이에 넣어주어야한다.
그리기 경로
beginPath()— 현재 펜이 캔버스에 있는 지점에서 경로 그리기를 시작합니다. 새 캔버스에서 펜은 (0, 0)에서 시작합니다.
moveTo()— 선을 기록하거나 추적하지 않고 펜을 캔버스의 다른 지점으로 이동합니다. 펜이 새 위치로 "점프"합니다.
fill() — 지금까지 추적한 경로를 채워 채워진 모양을 그립니다.
stroke() — 지금까지 그린 경로를 따라 획을 그려 윤곽선 모양을 그립니다.
lineWidth및 fillStyle/ strokeStyle와 같은 기능 을 경로 및 직사각형과 함께 사용할 수도 있습니다 .
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
=> 요런 아주 기본적인 기능들....!
=> 일단 canvas 강의를 들어봤기에 좀더 다양한 라이브러리들이 많이 있는 것을 잘알고는 있다. 하지만 근본을 한번 공부해보는 마음 좋다!(지금은 조금 시간 있으니께)
선 그리기
function degToRad(degrees) {
return degrees * Math.PI / 180;
};=> 컴퓨터가 인식하는 라디안을 사람이 인식하는 도수로 변경하기
=> fill은 테두리가 생기지 않는다 선이 채워지면 안을 색칠한다
=> 선을 그리려면 stroke를 활용
=> 나름 탄젠트를 사용하는 복잡한거 같지만 사실 코드라는 것만 빼고 보면 중학교 수준의 수학일 뿐이당
원 그리기
arc()6개의 매개변수를 취합니다. 처음 두 개는 호의 중심 위치를 지정합니다(각각 X 및 Y). 세 번째는 원의 반지름이고, 네 번째와 다섯 번째는 원을 그릴 시작 및 끝 각도이며(따라서 0도와 360도를 지정하면 완전한 원이 됨), 여섯 번째 매개변수는 원을 시계 반대 방향으로 그려야 하는지 여부를 정의합니다( 시계 반대 방향) 또는 시계 방향( false시계 방향).
=> 전에 공부할 때는 라디안을 변수로 넣었는데 이렇게 함수로 바꿔주니 너무 편리
이것은 캔버스의 또 다른 중요한 점을 보여줍니다. 불완전한 경로(즉, 닫히지 않은 경로)를 채우려고 하면 브라우저는 시작점과 끝점 사이의 직선을 채운 다음 채웁니다.
// ctx.lineTo(200, 106);=> 맨 마지막 줄을 주석 처리하면?
