canvas
Canvas
: 웹페이지에서 그래픽적인 것을 그릴 때 사용한다.
속성
- width
- height
요소
- 고정된 크기의 드로잉 영역을 생성
: 보여질 컨텐츠를 생성하고 다루게 될 두가지 이상의 렌더링 컨텍스트를 노출시킨다.
getContext() 메서드를 호출해서 렌더링 컨텍스트와 그리기 함수들을 사용한다.
drawImage
: 캔버스에서 이미지를 그려줌
- 이미지를 그려주기 위해 먼저 new Image로 객체를 생성한 뒤 onload로 이미지를 로딩한 후에
캔버스에서 이미지를 그릴 수 있다.
drawImage(image, canvas_x, canvas_y)
- image : 이미지 객체
- canvas_x : 캔버스의 x 좌표
- canvas_y : 캔버스의 y 좌표
출처
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법 - Web API | MDN
<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리
developer.mozilla.org
https://cornswrold.tistory.com/112
[HTML] 캔버스(canvas) 기본 사용법
캔버스 요소 HTML의 는 웹페이지에서 그래픽적인 것을 그릴 때 사용된다. src 및 alt 속성이 없다는 점만 제외하면 요소와 비슷하게 보인다. 요소에는 width와 height 두 속성만 존재한다. 요소와 달리,
cornswrold.tistory.com
https://devjhs.tistory.com/577
[html5] drawImage - canvas에 이미지 그리기
1. 개념 drawImage - canvas에서 이미지 그리기 drawImage는 캔버스에서 이미지를 그려줌 이미지를 그려주기 위해 먼저 new Image 로 객체를 생성한 뒤 onload로 이미지를 로딩한 후에 캔버스에서 이미지를
devjhs.tistory.com