Hidden(MetaData)
drawImage(HTMLImageElementimg, Numberdx, Numberdy | HTMLImageElementimg, Numberdx, Numberdy, NumberdWidth, NumberdHeight | HTMLImageElementimg, NumbersX, NumbersY, NumbersWidth, NumbersHeight, NumberdX, NumberdY, NumberdWidth, NumberdHeight)
drawImage()
는(은) OffscreenCanvasRenderingContext2D.prototype.drawImage()
와(과) 동일한 작동 방식을 갖는다. 따라서 OffscreenCanvasRenderingContext2D.prototype.drawImage()
레퍼런스를 그대로 보여주는 것을 참고(주의)하기 바란다.
캔버스에 이미지를 그리는 다양한 방법을 제공한다.
캔버스에 그려질 수 있는 이미지의 타입들은 다음과 같다.
매개 변수
drawImage()
는(은) OffscreenCanvasRenderingContext2D.prototype.drawImage()
와(과) 동일한 작동 방식을 갖는다. 따라서 OffscreenCanvasRenderingContext2D.prototype.drawImage()
레퍼런스를 그대로 보여주는 것을 참고(주의)하기 바란다.
- Use of parameters type 1
- HTMLImageElementimg필수
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
- Numberdx필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.
- Numberdy필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y
위치값을 캔버스 영역 기준으로 지정한다.
- Use of parameters type 2
- HTMLImageElementimg필수
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
- Numberdx필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x
위치값을 캔버스 영역 기준으로 지정한다.
- Numberdy필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y
위치값을 캔버스 영역 기준으로 지정한다.
- NumberdWidth필수
캔버스 내에서 그려질 이미지의 너비를 지정한다.
- NumberdHeight필수
캔버스 내에서 그려질 이미지의 높이를 지정한다.
- Use of parameters type 3
- HTMLImageElementimg필수
사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.
- NumbersX필수
이미지가 그려지는 위치(dX)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 x
위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.
- NumbersY필수
이미지가 그려지는 위치(dY)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 y
위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.
- NumbersWidth필수
sX 위치로부터 원래 이미지 가로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.
- NumbersHeight필수
sY 위치로부터 원래 이미지 세로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.
- NumberdX필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.
- NumberdY필수
캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y
위치값을 캔버스 영역 기준으로 지정한다.
- NumberdWidth필수
캔버스 내에서 그려질 이미지의 너비를 지정한다.
- NumberdHeight필수
캔버스 내에서 그려질 이미지의 높이를 지정한다.
반환
drawImage()
는(은) OffscreenCanvasRenderingContext2D.prototype.drawImage()
와(과) 동일한 작동 방식을 갖는다. 따라서 OffscreenCanvasRenderingContext2D.prototype.drawImage()
레퍼런스를 그대로 보여주는 것을 참고(주의)하기 바란다.
No return value
지원 웹브라우저