자바스크립트 Canvas - 원 그리기
기본 세팅 링크: https://schwhitezer.tistory.com/30 자바스크립트 Canvas - 시작 세팅 자바스크립트 Canvas로 웹 2D 게임이나 시각 효과를 낼 수 있다. html 파일 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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..
자바스크립트 Canvas - strokeRect() fillRect() 크기 문제 해결
캔버스 도형 그리는 중 strokeRect()와 fillRect()로 만든 도형들을 비교하면 크기가 다르다는 것을 확인할 수 있다. 1 2 3 4 5 ctx.lineWidth = 10; ctx.fillRect(100, 100, 100, 100) ctx.strokeRect(220, 100, 100, 100); cs 자세히 보면 strokeRect() 함수로 그린 도형은 fillRect() 함수 도형에 lineWidth 절반을 밖으로 감싸고 절반은 들어갔다. 아래를 예시를 보자. 1 2 3 4 5 6 7 8 9 ctx.lineWidth = 10; ctx.fillRect(100, 100, 100, 100) ctx.strokeRect(220, 100, 100, 100); ctx.strokeRect(100, 22..
자바스크립트 Canvas - fillRect() 함수로 직사각형 & 정사각형 그리기
fillRect() 함수 사용법: fillRect(x, y, 너비, 높이) 도형 기본 색은 검은색 도형 채우는 색 변경 시 ctx.fillStyle property 값을 변경 (예: ctx.fillStyle = 'blue') 단점은 도형의 윤곽선 색 변경은 불가(하지만 rect()와 fill() 함수를 이용한 윤곽선 색 변경 가능, 맨 밑 참고) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 너비 100, 높이 50 직사각형 ctx.fillRect(0, 100, 100, 50); // 너비 100, 높이 100 정사각형 ctx.fillRect(150, 100, 100, 100); // fillStyle property에 파란색 값을 할당 ctx.fillStyl..
자바스크립트 Canvas - strokeRect() 함수로 직사각형 & 정사각형 윤곽선 그리기
알림: HTML, 자바스크립트 캔버스 기본 세팅 완료 후 원활한 코딩 가능. strokeRect() 함수로 윤곽선 직사각형 & 정사각형 그리기 strokeRect() 함수 사용법: strokeRect(x, y, 너비, 높이) 1 2 3 4 5 6 7 8 9 10 // 너비 100, 높이 50인 직사각형 ctx.strokeRect(100, 100, 100, 50); // 너비 100, 높이 100인 정사각형 ctx.strokeRect(250, 100, 100, 100); // 윤곽선 폭 10인 빨간색 정사각형 ctx.strokeStyle = 'red' ctx.lineWidth = 10 ctx.strokeRect(400, 100, 100, 100); cs strokeStyle 값 할당 시 값은 rgb, rg..
