HTML 캔버스 putImageData () 메소드
예
다음 코드 getImageData는 () putImageData에 의해 캔버스에 다시) (이미지 데이터를 캔버스 사각형 지정된 픽셀 데이터에 복사 :
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);
}
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);
}
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 putImageData () 메소드.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
다시 캔버스에 (지정된 imageData의 객체에서) 이미지 데이터의 putImageData () 메소드.
팁 : 참조 getImageData () 메소드를가 캔버스에 지정된 픽셀 데이터의 사각형을 복사 할 수 있습니다.
팁 : 참조 createImageData를 () 비어있는 새 imageData의 객체를 생성하는 방법을,.
자바 스크립트 구문
| 자바 스크립트 구문 : | 문맥 .putImageData (imgData, X, Y, dirtyX, dirtyY, dirtyWidth, dirtyHeight); |
|---|
매개 변수 값
| 参数 | 描述 |
|---|---|
| imgData | 规定要放回画布的 ImageData 对象。 |
| x | ImageData 对象左上角的 x 坐标，以像素计。 |
| y | ImageData 对象左上角的 y 坐标，以像素计。 |
| dirtyX | 可选。水平值（x），以像素计，在画布上放置图像的位置。 |
| dirtyY | 可选。垂直值（y），以像素计，在画布上放置图像的位置。 |
| dirtyWidth | 可选。在画布上绘制图像所使用的宽度。 |
| dirtyHeight | 可选。在画布上绘制图像所使用的高度。 |