Latest web development tutorials

HTML 캔버스 createImageData를 () 메소드

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서

예

각 픽셀은 빨간색 인 100 * 100 픽셀의 imageData의 객체를 생성 한 후 캔버스에 넣어 :

YourbrowserdoesnotsupporttheHTML5canvastag.

자바 스크립트 :

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);

»시도

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 createImageData를 () 메소드.

참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.

정의 및 사용

createImageData를 () 메소드는 비어있는 새 imageData의 개체를 만듭니다. 새 개체 픽셀 투명 블랙의 기본 값입니다.

각 픽셀에 대한 객체 imageData의 정보, 즉 RGBA 값의 네 가지 영역이있다 :

R - 빨간색 (255)
G - 그린 (255)
B - 블루 (255)
A - 알파 채널 (0-255 0은 투명, 255은 완전히 볼 수 있습니다)

따라서, 투명 블랙 표현 (0,0,0,0).

색상 / 어레이 형태의 알파 정보, 상기 어레이는, 각 화소 정보의 네 부분을 포함하므로 배열의 크기는 imageData의 목적은 이후 네 번 : 폭 * 높이 * 4. (배열 크기보다 간단한 방법 ImageDataObject.data.length을 사용하여 얻어진)

그것은 개체의 저장 색상 / 알파 imageData의 배열 정보가 포함 된 데이터 속성을.

팁 : 작업 색상 / 알파 정보의 전체 배열이, 당신이 사용할 수있는 putImageData ()를 이미지 데이터의 방법은 다시 캔버스에 복사됩니다.

예 :

imageData의 빨간색 구문 제 1 화소 개체 :

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 = 컨텍스트 .createImageData (폭,높이);

2. (이미지 데이터는 복사되지 않습니다) 다른 개체의 크기와 같은 imageData의 새로운 imageData의 지정된 개체를 만듭니다

자바 스크립트 구문 : VAR imgData = 컨텍스트 .createImageData (imageData의);

매개 변수 값

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서