HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML 캔버스 putImageData() 메서드

putImageData()는 Canvas 2D API는 이미지 데이터를 기존 ImageData 객체에 그리는 메서드입니다. 그리워진 사각형이 제공되면, 해당 사각형의 픽셀만 그립니다. 이 메서드는 캔버스 변환 행렬에 영향을 받지 않습니다.

HTML canvas 참조 매뉴얼

온라인 예제

아래의 코드는 getImageData()를 사용하여 캔버스 상에 지정된 사각형의 픽셀 데이터를 복사하고, putImageData()를 사용하여 이미지 데이터를 캔버스에 다시 설정하는 방법을 보여줍니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas getImageData() 메서드 사용-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持　HTML5　canvas 태그.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">복사</button>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, Safari 및 Safari가 putImageData() 메서드를 지원합니다.

주의:Internet Explorer 8 이전 버전에서는 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

putImageData() 메서드는 지정된 ImageData 객체에서 데이터를 가져와 캔버스에 다시 설정합니다.

팁:참조 getImageData() 캔버스 상에 지정된 사각형의 픽셀 데이터를 복사할 수 있는 메서드입니다.

팁:참조 createImageData() 새로운 비어 있는 ImageData 객체를 생성할 수 있는 메서드.

JavaScript 문법

JavaScript 문법:	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

매개변수 값

매개변수	설명
imgData	캔버스에 반환할 ImageData 객체를 정의.
x	ImageData 객체 왼쪽 상단의 x 좌표，픽셀 단위로 계산.
y	ImageData 객체 왼쪽 상단의 y 좌표，픽셀 단위로 계산.
dirtyX	선택 사항. 가로 값(x)，픽셀 단위로 캔버스에 이미지를 배치하는 위치.
dirtyY	선택 사항. 세로 값(y)，픽셀 단위로 캔버스에 이미지를 배치하는 위치.
dirtyWidth	선택 사항. 이미지를 그리기 위해 사용하는 캔버스의 너비.
dirtyHeight	선택 사항. 이미지를 그리기 위해 사용하는 캔버스의 높이.

　HTML canvas 참조 매뉴얼

HTML: <template> 태그