EverGiver

Styles and Shadow fillStyle - 색상, 그라디언트, 패턴으로 면을 지정하는 속성 - 기본값 #000000 strokeStyle - 색상, 그라디언트, 패턴으로 선을 지정하는 속성 - 기본값 #000000 shadowColor - 그림자 색상을 지정하는 속성 - shadowBlur나 shadowOffset과 함께 사용 shadowBlur - 그림자의 흐름을 지정하는 속성 - shadowColor와 함께 사용 - 기본값 #000000 shadowOffsetX / shadowOffsetY - 도형으로부터 그림자와의 거리를 지정하는 속성 - shadowColor와 함께 사용 - 기본값 0 const canvas4 = document.getElementById('canvas4'); const..

Canvas Drawing getContext() - 드로잉을 위한 속성과 메소드를 적용할 수 있도록 HTML 오브젝트를 생성하는 Canvas의 메소드 fillRect(x,y,width,height) - x와 y는 사각형의 좌측 상단 좌표이고 width와 height는 사각형의 가로와 세로 픽셀 사이즈이다. const canvas1 = document.getElementById('canvas1'); const ctx1 = canvas1.getContext('2d'); ctx1.fillRect(150,100,300,200);​ moveTo(x,y) - 라인의 시작 좌표를 지정하는 Canvas 메소드 lineTo(x,y) - 라인의 종료 좌표를 지정하는 Canvas 메소드 stroke( ) - 정의한 패스를..

엘리먼트 HTML 페이지에 Canvas를 적용하려면 엘리먼트 사용해야 한다. width와 height 속성은 Canvas의 사이즈를 지정하며 기본적으로 엘리먼트는 테두리와 콘텐츠가 없다. canvas ​

정적인 이미지는 태그를 사용하거나 HTML 엘리먼트에 CSS의 background-image 속성을 이용하여 보여줄 수 있지만 도형을 동적으로 그리거나 그려진 도형을 제어해야 하는 경우 다른 방법들을 사용해야 한다. CANVAS란 IE9 이상 지원 HTML5의 CANVAS는 자바스크립트를 이용해 원하는 2D 그래픽을 무엇이든 만들 수 있다. Raster 방식이기 때문에 Pixel 단위로 컨트롤이 가능하다. (Raster 방식 : 이미지의 모양과 색을 색상 정보가 담긴 픽셀로 표현하는 형태) DOM이 없고 픽셀로만 컨트롤 되기 때문에 한번 그림이 그려지게 되면 브라우저에서 잊히게 된다. HTML5 캔버스는 자바스크립트로 처리할 수 있는 즉시 모드 비트맵 영역이다. - 즉시 모드 (immediate mode..