※ 이 글은 예전 블로그에서 퍼왔으며 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..