HTML5_Canvas

✹ 해당 포스팅은 Youtube에 업로드된 1분코딩님의 <HTML5 Canvas 캔버스 라이브 강좌>의 필기입니다.이 곳을 클릭하시면 유튜브에서 직접 강좌를 들으실 수 있습니다.그러나 놀랍게도 HTML코드를 살펴보면, 두 캔버스 태그의 크기는 서로 다르게 설정되어

콘텍스트 객체 > 캔버스에 그림을 그릴 때는 거의 Context를 이용해서 그린다! 이 세팅을 거의 기본으로 생각해주면 된다. Context는 getContext 메소드를 통해서 호출한다. getContext를 통해서 context를 호출한 후에 이를 console에

requestAnimationFrame 애니메이션을 공부할 때 수도 없이 보아왔던 requestAnimationFrame MDN을 참고하면! > window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트

캔버스를 사용할 때 많은 데이터를 시각적으로 막 표현해주는 작업이 아니라비주얼 표현할 때는 도형 에이피아이 쓰는 게 아니라 일반적으로 걍 이미지 쓰는 경우가 많다.두 가지 방법으로 이미지 만들기 가능외부데이터라는 얘기는 로딩될 시간이 필요하다는 것임캔버스에 그리려면 일

HTML5 Video 태그 HTML5에서 비디오태그가 추가되었다. 기본적으로는 태그 안에 src 속성으로 비디오 주소를 작성해주면 비디오가 출력되는 것을 확인할 수 있다. autoplay, muted를 비롯해 다양한 옵션이 있는데, 이는 공식문서에서 확인하는 것으로.

크기를 바꾸거나 위치를 바꾸거나 찌그러뜨리거나 회전하거나 등등상태 저장과 복원공식문서 canvas transformation컨텍스트 객체 메소드들임!fillStyle 색상 변환물감이 묻어 있다가 바꿔주는 것.save() 캔버스의 모든 상태 저장.restore() 가장