# ctx

총 3개의 포스트
post-thumbnail

[Bouncing Ball] clip()으로 도형에 이미지 넣고 애니메이션 적용

벽에 부딫히는 공 애니메이션clip 사용하기캔버스에 이미지 그리기공에 이미지 넣기clip() 기능을 사용해 핑크색 공 안에 보라색 상자를 넣을 수 있다즉, 핑크색 공은 보라색 상자 내부에만 존재drawImageimg.onload는 이벤트리스터로 작성해도 된다이미지 출력

animate()animationcanvasclipclippingcontextctxdrawImageimageimgmaskshadowshadowBlur매스크애니메이션이미지캔버스컨텍스트클리핑클립
2021년 2월 5일
·
0개의 댓글
·

[Bouncing Ball] 윈도우 창에 부딪히는 공 애니메이션

캔버스에 공 그리기애니메이션 만들기beginPath로 시작점 알리기원의 중심, 시작각도, 끝각도, 그리는 방향 설정fillStyle로 채울 색 설정 (이미지패턴같은 것도 가능)fill()로 채움그림을 그릴 캔버스를 생성해준다Ball의 draw 함수를 호출해 ball을

animationballboucingbouncecanvascollidecollisioncontextctx공볼애니메이션캔버스컨텍스트튀기기튀기는
2021년 2월 5일
·
1개의 댓글
·
post-thumbnail

[애니메이션 초기작업] 윈도우 창이 변할 때마다 Canvas 크기 새로 지정

2차원 비트맵 그래픽과 애니메이션을 그릴 수 있는 HTML 요소패스, 도형, 글자 등을 그리고 이미지를 추가하는 다양한 함수들이 존재width와 height 속성만 존재 (default width: 150, height: 300)캔버스는 고정 크기의 드로잉 영역을 생성

JavaScriptanimate()animationcanvascontextctxdisplayretina레티나애니메이션캔버스화질
2021년 2월 3일
·
0개의 댓글
·