최신 웹 개발 튜토리얼
 

HTML canvas createImageData() Method

<캔버스 개체

모든 픽셀이 빨간색 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);
»그것을 자신을 시도

브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
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 객체

<캔버스 개체