canvas 2

Javascript: canvas 환경 세팅

2021 10 24 업데이트 HTML 세팅 1) HTML의 기본 골격을 사용한다. html / head /body 2) meta태그는 속성을 세가지를 사용한다 charset / http-equiv / name ="viewport" 3) CSS와 js연결. script 속성으로 type="module"을 추가함으로 import와 export를 이용해 더욱 객체화한다 4) canvas를 HTML에 만들지 않는다 는 서로 호환성이 다른 경우에 인터넷 익스플로러(IE)버전 중 가장 최신으로 보여주게 해준다. 쿼크모드라고도 한다 meta viewport는 애플이 디바이스 화면크기에 따라 크기를 조절하기 위해 만들었다. content 내에 설정값을 적어주며 쉼표(,)로 구분한다. width = device-widt..

Study/Javascript 2021.09.28

Javascript: 게임 개발의 기초

1. 준비하기 CSS와 Javascript에 연결하기 HTML: 태그 canvas는 width와 height속성을 사용할 수 있는 요소로 드로잉 영역을 생성한다. 간단한 게임을 만들 때 게임이 작동하는 공간으로 사용된다. HTML에 요소를 만들었으니 자바스크립트에도 연결해주어야 한다 var canvas = document.getElementById("canvas"); 는 처음에 비어있는 도화지와 같다. 그림을 그릴 연필과 크레파스(도구)를 같이 불러와야 한다 .getContext('2d'); 메소드를 통해 2차원 랜더링의 함수(도구)에 접근할 수 있다 var ctx = canvas.getContext('2d'); 캔버스의 크기를 정해준다 canvas.width=window.innerWidth - 100;..

Study/Javascript 2021.09.27