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

HTMLタグ完全ガイド

HTMLキャンバス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"　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 9、Firefox、Opera、Chrome、SafariはcreateImageData()をサポートしています。メソッド。

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

定義と用法

createImageData()メソッドは新しい空白のImageDataオブジェクトを作成します。新しいオブジェクトのデフォルトのピクセル値は透明な黒です。

ImageDataオブジェクトの各ピクセルには、RGBA値の4つの情報が存在します：

R - 赤（0-255）
G - 緑（0-255）
B - 青（0-255）
A - alphaチャンネル（0-255; 0は透明です255 完全に見えることになります）

したがって、透明な黒は(0,0,0,0)を表します。

color/alpha情報は配列形式で存在し、配列には各ピクセルの4つの情報が含まれているため、配列のサイズはImageDataオブジェクトの4倍：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 オブジェクトの2番目のピクセルを緑色にする文法：

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

JavaScript 文法

createImageData() メソッドには2つのバージョンがあります：

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> タグ