HTML 캔버스 imageData의 데이터 속성
예
각 픽셀은 빨강으로 설정되어 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);
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);
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 imageData의 데이터 특성을가집니다.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
데이터 속성은 이미지 데이터를 지정된 imageData의 객체를 포함하는 객체를 반환한다.
각 픽셀에 대한 객체 imageData의 정보, 즉 RGBA 값의 네 가지 영역이있다 :
R - 빨간색 (255)
G - 그린 (255)
B - 블루 (255)
A - 알파 채널 (0-255 0은 투명, 255은 완전히 볼 수 있습니다)
색상 / 알파 배열의 형태로 정보 데이터에 저장된 imageData의 객체 속성.
예 :
imageData의 빨간색 구문 제 1 화소 개체 :
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
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;
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
팁 : 참조 createImageData를 () , getImageData () 및 putImageData () imageData의 개체에 대한 더 많은 지식을 얻을 수있는 방법을.
자바 스크립트 구문
| 자바 스크립트 구문 : | imageData의의 .DATA; |
|---|
HTML 캔버스 참조 설명서