HTML CANVAS2 HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 # HTML Canvas 선 그리기 방법 1. 새로운 선 그리기 설정: ctx.beginPath() 2. 선의 출발점 지정 : ctx.moveTo(x, y) 3. 선의 도착점 지정 : ctx.lineTo(x, y) 4. 선 그리기 : ctx.stoke() * 여러개의 선을 그릴 때는 매번 beginPath() 호출 필요 * beginPath()를 호출하지 않으면, 도착점들을 계속 잇는 선이 그려진다. # 선 디자인 설정 방법 1. 선 디자인 설정 1) 색상 설정: ctx.strokeStyle = '색상'; 2) 두께 설정: ctx.lineWidth = 숫자; * 선 색상/두께는 그리기(ctx.stoke()) 전에 설정 2. 선 끝부분 설정: ctx.lineCap = "butt/square/round" 1.. 2021. 6. 1. HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드 # HTML Canvas란? 1. canvas는 html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트다. 2. 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있다. # canvas 사용 방법 1. html 문서에 canvas 엘리먼트를 선언한다. 2. canvas 엘리먼트에 id 속성을 설정한다. 3. canvas 태그 내부에 width, height를 설정한다. 4. canvas 내장 '그리기 객체'를 취득한다. 5. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 6. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 7. 자바스크립트를 통해 다양한 효과를 구현한다. # canvas 기초 샘플 코드 캔버스 태그를 생성하고,.. 2021. 6. 1. 이전 1 다음
