HTML 참조 설명서

HTML 태그 전체

HTML canvas createImageData() 메서드

createImageData()는 Canvas 2D API를 사용하여 새로운, 빈, 지정된 크기의 ImageData 객체를 생성합니다. 새로운 객체의 모든 픽셀은 투명합니다.

온라인 예제

생성하십시오100 * 100픽셀의 ImageData 객체를 생성하고, 각 픽셀이 모두 빨간색이 되도록하고 그것을 캔버스에 배치하세요：

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas createImageData() 메서드 사용-기본教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" 높이="150" style="border:1px solid #d3d3d3>
您的浏览器不支持　HTML5　canvas 태그.
</canvas>
<script>
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);
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, Safari 및 Safari가 createImageData()를 지원합니다. 메서드.

주의:Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

createImageData() 메서드는 새로운 빈 ImageData 객체를 생성합니다. 새로운 객체의 기본 픽셀 값은 투명한 검은색입니다.

ImageData 객체의 각 픽셀에는 네 가지 정보가 있습니다: RGBA 값

R - 빨간색(0-255)
G - 녹색(0-255)
B - 파란색(0-255)
A - alpha 채널(0-255; 0은 투명합니다.255 완전히 보이는 것입니다)

따라서, 투명한 검은색은 (0,0,0,0)을 의미합니다.

color/alpha 정보는 배열 형태로 존재하며, 각 픽셀의 네 가지 정보를 포함하고 있기 때문에 배열의 크기는 ImageData 객체의 네 배입니다: width*height*4。(배열 크기를 얻는 더 간단한 방법은 ImageDataObject.data.length를 사용하는 것입니다)

color/alpha 정보의 배열은 ImageData 객체의 data 속성 중.

주의:배열의 color/alpha 정보가 있으면, 다음을 사용할 수 있습니다: putImageData() 이미지 데이터를 캔버스에 복사하는 메서드.

예제:

ImageData 객체의 첫 번째 픽셀을 빨간색으로 변환하는 문법:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1=0;
imgData.data[2=0;
imgData.data[3]=255;

ImageData 객체의 두 번째 픽셀을 녹색으로 만드는 문법:

imgData=ctx.createImageData(100,100);
imgData.data[4=0;
imgData.data[5]=255;
imgData.data[6=0;
imgData.data[7]=255;

JavaScript 문법

createImageData() 메서드는 두 가지 버전이 있습니다:

1. 지정된 크기(픽셀로 측정)로 새로운 ImageData 객체를 생성합니다:

JavaScript 문법:	var imgData=context.createImageData(width,height);

2. 새로운 ImageData 객체를 생성하여 지정된 다른 ImageData 객체의 크기를 복사하지 않습니다:

JavaScript 문법:	var imgData=context.createImageData(imageData);

파라미터 값

파라미터	설명
width	ImageData 객체의 너비(픽셀로 측정)
height	ImageData 객체의 높이(픽셀로 측정)
imageData	추가 ImageData 객체.

　HTML canvas 참조 가이드

HTML: <template> 태그