HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML: <template> 태그

HTML canvas ImageData.data 속성

읽기 전용의 ImageData.data 속성은 Uint8ClampedArray, 하나의 차원 배열을 설명하며, RGBA 순서로 데이터가 0에서 255（包含）의 정수를 나타냅니다.

HTML canvas 참조 가이드

在线示例

创建一个100 * 100 픽셀의 ImageData 객체, 각 픽셀은 빨간색으로 설정되어 있습니다:

画布

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　imgData.data属性使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="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는 ImageData를 지원합니다. data 속성.

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

정의와 사용법

data 속성은 지정된 ImageData 객체의 이미지 데이터를 포함하는 객체를 반환합니다.

ImageData 객체의 각 픽셀에 대해 네 개의 정보가 있습니다. 즉 RGBA 값이어요:

R - 红色(0-255,
G - 绿色(0-255,
B - -255,
A - alpha 채널(0-255; 0은투명합니다255 是完全可见的）

색상/alpha 정보는 배열 형태로 존재하며 ImageData 객체의 data 속성에 저장됩니다.

예제:

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;

안내:참조 createImageData()、getImageData() 및putImageData() 메서드를 통해 ImageData 객체에 대한 더 많은 정보를 얻을 수 있습니다.

JavaScript 문법

JavaScript 문법:	imageData.data;

　HTML canvas 참조 가이드

HTML: <template> 태그