[Canvas] 튜토리얼 선 그리기 기본 원리 HTML5 캔버스를 사용하여 직선을 그리려면 다음과 같은 단계를 수행해야합니다. 캔버스 요소를 생성 getContext('2d') 생성 beginPath() 경로 초기화 moveTo()사용하여 시작점을 설정 lineTo() 사용하여 끝점을 설정 stoke() 사용하여 선을 그립니다. 직선 그리기( movTo, lineTo, stroke) 위에 설명 대로 html파일 하나로 캔버스 호출하여 JS로 제어 하여 직선을 만들어 봅니다. 켄버스 높의 20% 위치에서 시작하여 길이가 캔버스 높이의 60%인 선을 그립니다. HTML 삽입 미리보기할 수 없는 소스 다중선 그리기 movTo lineTo stroke 반복해서 그리면 됩니다. HTML 삽입 미리보기할 수 없는 ..
캔버스 소개 캔버스 사용하기 2D 랜더링 컨텍스트 기본 도형 그리기 직선그리기 도형 스타일링 이미지 텍스트 애니메이션 이벤트 처리
웹 게임 개발 [웹 게임 개발] 스틱 히어로 - 게임 인트로 만들기(1) [웹 게임 개발] 스틱 히어로 - 게임 인트로 만들기(1) 웹 게임 개발 폴더 구성 기본적은 게임을 구성하는 파일과 폴더를 생성합니다. HTML 파일 생성 index.html 이렇게 구성된 HTML파일은 캔버스를 생성하고, 외부 스타일시트 및 스크립트를 연결합니다. idocleancode.tistory.com 히어로 몸통 만들기 game.js 파일에 전역 변수로 히어로 크기 변수 지정합니다. // 히어로 크기 let heroWidth = 80; let heroHeight = 90; game.js 파일에 createHero함수를 만들어 아래 코드를 작성합니다 function createHero(ctx, x, y, width, heig..
웹 게임 개발 폴더 구성 기본적은 게임을 구성하는 파일과 폴더를 생성합니다. HTML 파일 생성 index.html 이렇게 구성된 HTML파일은 캔버스를 생성하고, 외부 스타일시트 및 스크립트를 연결합니다. 게임 디자인과 로직을 구현할 수 있게 설정 합니다. 캔버스 위치 설정 canvas { border: 1px solid black; display: block; margin: 0 auto; } 캔버스는 기본적으로 인라인 요소라서(inline element), 블록 요소로 변경해야 레이아웃을 가운데 정렬을 할수 있습니다. 캔버스 제어 game.js에 아래 코드를 작성 합니다. // 캔버스 요소와 그래픽 컨텍스트를 가져옵니다. const canvas = document.getElementById('game..