예
크리에이트 100*100 모든 픽셀이 빨간색 픽셀 imageData의 개체를 캔버스에 넣어 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10); »그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| createImageData() | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
createImageData() 메소드는 비어있는 새 imageData의 개체를 만듭니다. 새로운 객체의 픽셀 값은 기본적으로 투명 검은 색이다.
imageData의 객체의 모든 픽셀에 대한 정보는 RGBA 값의 네 가지가있다 :
R - (255)에서 붉은 색
G - (255)에서 색상 녹색
B - (255)에서 색상 청색
- 알파 채널 (255에서 0은 투명하고, 255은 완전한 표시됨)
그래서, 투명 블랙 나타냅니다 (0,0,0,0) .
컬러 / 알파 정보는 배열로 유지되고, 상기 어레이의 모든 픽셀 정보를 4 개 포함하고 있기 때문에, 어레이의 크기는 imageData의 객체의 4 배의 크기 : 폭 * 높이 * 4. (배열의 크기를 찾기 쉬운 방법은 ImageDataObject.data.length를 사용하는 것)
컬러 / 알파 정보를 포함하는 배열에 저장되어있는 data imageData의 객체의 속성.
팁 : 배열의 색상 / 알파 정보를 조작 한 후, 당신은으로 캔버스에 다시 이미지 데이터를 복사 할 수 있습니다 putImageData() 방법.
예를 들면 :
imageData의의 첫 번째 픽셀을 만들기위한 구문은 빨간색 개체 :
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;imageData의 개체 녹색의 제 2 픽셀을 만들기위한 구문 :
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;자바 스크립트 구문
의 두 가지 버전이 있습니다 createImageData() 메소드는 :
1.이 (픽셀) 지정된 크기로 새로운 imageData의 객체를 생성한다 :
| 자바 스크립트 구문 : | var imgData=context.createImageData(width,height); |
|---|
2. 이것은 anotherImageData 의해 지정된 오브젝트와 동일한 크기 (이 화상 데이터를 복사하지 않음)와 imageData의 새로운 객체를 생성한다 :
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
매개 변수 값
| 매개 변수 | 기술 |
|---|---|
| width | 픽셀의 새로운 imageData의 객체의 폭, |
| height | 픽셀의 새로운 imageData의 객체의 높이, |
| imageData | anotherImageData 객체 |