예
모든 픽셀이 빨간색 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
createImageData() 메소드는 새로운 빈 imageData의 개체를 만듭니다. 새로운 객체의 픽셀 값은 기본적으로 투명 검은 색이다.
imageData의 개체 화소마다 내용 RGBA 값의 네 가지가있다 :
R - 붉은 색 (from 0-255)
G - 색상 녹색 (from 0-255)
B - 색상 블루 (from 0-255)
A - 알파 채널 (from 0-255; 0 is transparent and 255 is fully visible)
그래서, 투명 검은 색을 나타냅니다 : (0,0,0,0) .
컬러 / 알파 정보는 배열로 유지되고, 상기 어레이의 모든 픽셀에 대해 정보의 4 개를 포함하고 있기 때문에, 어레이의 크기는 imageData의 객체의 4 배의 크기 : 폭 * 높이 * 4. (배열의 크기를 찾을 수있는 쉬운 방법은, ImageDataObject.data.length을 사용하는 것입니다)
색상 / 알파 정보를 포함하는 배열에 저장되어있는 데이터 imageData의 객체의 속성.
Tip: 당신이 배열의 색상 / 알파 정보를 조작 한 후, 당신은으로 캔버스에 다시 영상 데이터를 복사 할 수 있습니다 putImageData() 방법.
Examples:
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의 새로운 객체를 생성한다 (this does not copy the image data) :
| 자바 스크립트 구문 : | VAR imgData = context . createImageData( imageData ) ; |
|---|
매개 변수 값
| 매개 변수 | 기술 |
|---|---|
| width | 픽셀 imageData의 새로운 객체의 폭, |
| height | 픽셀 imageData의 새로운 오브젝트의 높이 |
| imageData | anotherImageData 객체 |
<캔버스 개체