Canvas 썸네일형 리스트형 [JavaScript] 자바스크립트로 캔버스 제어하기 - 스타일 저장 & 불러오기 (save와 restore) 개요 캔버스의 컨텍스트 영역에서는 한번에 하나의 스타일만 가질 수 있다. 예를 들어, 빨강색의 꽉찬 원과 파란색의 사각형을 그리려면.. 1. 현재 컨텍스트 영역의 채우기 스타일을 빨강색으로 설정한다. 2. 원을 그린다. 3. 현재 컨텍스트 영역의 채우기 스타일을 파란색으로 설정한다. 4. 사각형을 그린다. 한번에 빨강색과 파란색을 설정해두는게 아니라, 위의 예시처럼 스타일 하나를 설정하고 그리고 다시 스타일 하나를 설정하고 그리고.. 하는 방식이다. 그런데 만약, 빨강색 도형을 쭉 그리다가 파란색 도형을 또 쭉 그리다가 다시 빨강색 도형을 쭉 그리다가... 이런 식으로 전에 그렸던 스타일의 도형을 다시 그려야 한다고 하자. 한두번은 그렇다 쳐도, 만약 전에 그렸던 스타일을 자주 다시 그려야 한다면 코드에.. 더보기 [JavaScript] 자바스크립트로 캔버스 제어하기 - 2d 그래픽 그리기 자바스크립트에서 캔버스를 동적으로 제어하는 기능에 대해 공부한 내용 중, 2d 그래픽을 그리는 부분에 대해 정리했다. 캔버스 생성 화면에 createElement로 캔버스 엘리먼트를 생성하고, getContext로 캔버스에 연결된 렌더링 컨텍스트를 정의한다. const myCanvas = document.createElement('canvas'); //캔버스 엘리먼트 생성 const ctx = myCanvas.getContext('2d'); //생성한 캔버스에 컨텍스트를 연결 document.body.appendChild(myCanvas); //body 내에 캔버스를 배치 myCanvas.style.width = 100%; myCanvas.style.height = 100%; 여기서 렌더링 컨텍스트를 정.. 더보기 이전 1 다음
