HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML: <template> タグ

HTML canvas ImageData.data属性

読み取り専用のImageData.data属性は、Uint8ClampedArray、一つの次元配列を表し、RGBAの順序でデータが含まれており、データは0から 255（含む）の整数を表す。

HTML canvas 参考書

オンラインサンプル

1つの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>
あなたのブラウザはHTMLをサポートしていません。5　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 9、Firefox、Opera、Chrome、SafariがImageDataをサポートしています。 data属性。

注意：Internet Explorer 8 及びその以前のバージョンでは<canvas>要素をサポートしていません。

定義と用法

data属性は、指定されたImageDataオブジェクトの画像データを含むオブジェクトを返します。

ImageDataオブジェクトの各ピクセルに対して、4つの情報があります。つまりRGBA値です：

R - 赤色（0-255）
G - 緑色（0-255）
B - 青色（0-255）
A - アルファチャンネル（0-255; 0 は透明です、255 は完全に可視です（）

color/アルファ情報は配列形式で存在し、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> タグ