canvas 시작해보기 (내용 다듬기!!)

canvas로 그림을 그리려면 canvas객체의 getContext('2d')를 사용해야 함. +) canvas는 태그에 직접 width, height를 해주는 것과 css에 width, height 값을 주는 것이 다른 태그와는 다르게 작동한다. 예를들어, canvas태그에 w=1000을 주고 css에 w=500을 준 경우와 canvas태그와 css 모두 w=500을 준 경우 전자에 그림이 더 작게 표현된다. 너비가 1000픽셀인 그림의 너비를 500px인 해상도에 기존의 비율을 유지해서 그리기 때문임 이 방법을 사용하면 고해상도의 디바이스에 그림을 뿌려줘야하는 경우 선명하게 그림을 뿌릴 수 있다. (예시 - 디바이스 크기의 2배로 캔버스의 크기를 주고, css에는 너비와 높이를 100%로 줌)

2020.04.17