※ 이 글은 예전 블로그에서 퍼왔으며 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.에 작성된 글입니다. View HTML5 Canvas 연습작으로 만들어 보았다. 아직 Canvas로 인터렉션을 구현하는건 조금 어려운 것 같다..;; 아직은 어떻게 사용해야 할지 이게 맞게 한건지 잘 모르겠지만 계속 공부해 봐야겠다. PixiJS 라는 신박한 것도 있던데 한 번 공부해 보고 싶다. Link Window jeongwoo903.github.io 알게 된 것 ​ 1. 브라우저의 Width나 Height 값을 알고 싶다면 다음 코드를 이용하자. window.innerWidth; window.innerHeight; 2. Canvas Gradation 사용법 const grd = context.createLinearGradient(startX, ..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.15.에 작성된 글입니다. VIEW 알게 된 것 ​ 만약 라인 그라데이션을 쓸거면 이 색이 이쁘니 참고 하자. background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%); Flex 가운데 정렬을 하고 싶다면 다음 코드를 이용해보자. display: flex; justify-content: center; align-items: center; 다음 코드는 element들을 신축성있게 움직이게 해 준다. (뒤의 숫자는 남은 여백을 각각을 어느 비율로 나누어 설정할 것인가.) flex-grow: 1; 진짜 비율을 보이는 대로 나누고 싶다면 이 코드를 써라. flex: 1; Grid 비율대로 가르기 display..