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

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.13.에 작성된 글입니다. View 위의 작품들은 전부 Grid를 이용해서 만들어 봤다. 그냥 이런것들을 구현하는데 굳이 jQuery를 사용해야 되나 궁금해서 만들어 봤다. jQuery는 구현을 쉽게 할 수 있도록 도와주지만 나는 개인적으로 Vanilla JS를 지양하기 때문에 조금 거부감이 든다. 그래서 아직 jQuery를 공부함에 있어서 조금 망설임이 있다. 물론 Ajax와 같이 복잡한 기능을 구현하기 위해서는 생산성이 좋은 jQuery가 좋겠지만.. 아직은 잘 모르겠다. Drag N Drop은 drag 이벤트에 대한 지식이 없어서 조금 공부를 했어야 했다. 다음엔 drag 이벤트를 이용해서 옷 입히기 같은걸 만들어 봐도 재밌겠다는 생각이 들었다. l..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.10.에 작성된 글입니다. View 디자인은 흰색바탕에 검은색 테두리를 주면 카툰느낌이 나길래 한 번 해봤다. 이번 작품을 만들어 보면서 자바스크립트로 Canvas를 사용할 때 함수들을 어떻게 관리해야 하는지, 브라우저와의 충돌판정은 어떻게 구현할 수 있는지 등 다양한 방법을 알게 된 것 같다. link Cartoon Bubble jeongwoo903.github.io 알게 된 것 HTML5 Canvas Tutorial for Beginners 필기 HTML5 Canvas Tutorial for Beginners - Chris CoursesYoutube에 있는 HTML5Canvas 강의 인... blog.naver.com ect.