So tired
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.6.에 작성된 글입니다. ※ 이 글은 해당 사이트를 보고 작성한 글 입니다. 모든 HTML5 Canvas를 위한 4가지 필수 스킬들 1. Creating and Resizing your canvas (Canvas를 만들고 크기를 조절할 수 있는 능력) 2. Drawing Element (요소를 그릴 수 있는 능력) 3. Animating Element (정적인 요소를 움직일 수 있게하는 능력) 4. Interacting with Element (이벤트에 따라 요소를 움직일 수 있게하는 능력) Lecture #1. Creating and Resizing Canvas · Canvas의 사이즈 조절은 HTML attribute나 JS로 하자 ..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Draw Image HTML5Canvas에서 이미지를 그리려면 이미지 객체와 대상 지점을 필요로 하는 drawImage( )를 사용할 수 있다. 대상 지점(destination point)은 캔버스 왼쪽 위 모서리를 기준으로 canvas의 왼쪽 위 모서리를 정의한다. drawImage( )는 이미지 객체가 필요하므로 먼저 이미지를 생성한 후 로드될 때까지 기다려야 한다. 이미지 객체의 onload속성을 사용하여 이 작업을 수행할 수 있습니다. context.drawImage(imageObj, X, Y); ex) 예시 코드 const canvas = document.getElementByI..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Color Fill(색상 채우기) 단색(solid color)으로 모양을 채우기 위해선, fillStyle( ) 속성을 사용하여 RBG, HEX 등의 색상을 설정하고 fill( )을 사용하여 도형을 채울 수 있다. 특별한 명시가 없는 경우 HTML5Canvas 도형의 기본 채우기색은 검은색이다. context.fillStyle = "color"; context.fill(); Linear Gradient(선형 그라데이션) Linear gradient을 구현하기 위해선 createLinearGradation( )을 사용할 수 있다. Linear gradient는 gradient의 방향을 정의..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Custom Shape closePath( )를 사용하여 custom shape를 만들수 있다. Custom shape를 만들기 위한 각각의 하위경로를 만들기 위해 lineTo( )나 arcTo( ), quadraticCurveTo( ), bezierCurveTo( )를 사용할 수 있다. ex) 구름모양 코드 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // begin custom shape context.beginPath(); context.moveTo(170, 80); c..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.2.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Path(경로) 여러 하위 경로를 연결하여 경로를 생성할 수 있다. 각각의 새 하위 경로의 ending point는 새로운 context point가 된다. 각각의 하위 경로를 구성하는 방법으로 lineTo( )와 arcTo( ), quadraticCurveTo( ), bezierCurveTo( )가 있다. 또한 새로운 경로를 그릴때 마다 beginPath( )를 이용할 수 있다. context.beginPath(); context.moveTo(x, y); // line 1 context.lineTo(x, y); // quadratic curve context.quadraticCurveT..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.2.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. arc(호, 원호) 원의 호를 그리기 위해선 arc( )를 사용할 수 있다. 호는 중심점, 반지름, starting angle, ending angle, 회전방향(시계방향, 반시계방향)으로 정의된다. 호는 lineWidth, strokeStyle, lineCap속성을 가질 수 있다. 호는 가상의 원의 원주의 한 부분에 지나지 않는다. 이 가상의 원은 x, y, radius 로 정의할 수 있다. 그런 다음 startAngle과 endAngle로 정의된 가상의 원의 둘레를 따라 두개의 점으로 호를 정의 할 수 있다. 두 각들은 반지름으로 정의되며, 원의 중심에서 우리가 생성하려는 ..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.1.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Line 선을 그리기 위해선 beginPath( )나 moveto( ), linto( ), stroke( )와 같은 방법을 사용할 수 있다. 먼저 beginPath( )를 사용하여 새로운 경로를 그릴 것 임을 선언 할 수 있다. 다음으로 moveto( )를 사용하여 context point를 위치 시키고, lineto( )를 사용하여 시작 위치에서 새 위치로 직선을 그릴 수 있다. 마지막으로 stroke( )를 사용해 선을 보이게 할 수 있다. 특별한 명시가 없는 경우엔 default 값은 검은색이다. ( ex. context.strokeStyle = "red"; ) context.beg..
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.1.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. HTML5 캔버스 요소는 Javascript를 통해 렌더링 된다는 점을 제외 하면, 나 , 과 유사한 HTML태그 이다. HTML5 Canva를 활용하기 위해선 HTML태그 내부 어딘가에 를 배치해두고, Javascript로 에 접근하여 컨텍스트를 만든 다음 HTML5CanvasAPI를 사용하여 시각화를 그려야 한다. Canvas의 구성 요소와 캔버스 환경의 차이점을 이해하는 것이 중요하다. 캔버스 요소는 HTML페이지에 포함된 실제 DOM노드다. Canvas 컨텍스트는 Canvas 요소 내에서 그래픽을 렌더링 하는 데 사용할 수 있는 특성 및 방법이 포함된 개체 입니다. Co..