HTML5 canvas putImageData メソッド
 HTML5 canvas リファレンス
例
50 * 50 の矩形内の各ピクセルの色を青に替えます。
注:ピクセルが赤の所は、ピンク rgba(255,0,255,255) に替ります:
キャンバス
JavaScript:
... ctx.fillStyle="red"; ctx.fillRect(10,10,50,50); var
imgData=ctx.getImageData(30,30,50,50); for (i=0;
i<imgData.width*imgData.height*4;i+=4) { // Do nothing
with the colors red and green, set blue=255, and alpha=255:
imgData.data[i+2]=255; imgData.data[i+3]=255; }
ctx.putImageData(imgData,30,30); ...
定義と用法
putImageData メソッドは、キャンバスに imageData オブジェクトからデータを置くために使用します。
putImageData メソッドは、3 つまたは 7つのパラメータを取ることができます。
imageData と同じサイズと形状の図面を置く場合は 3 で、図面のどの部分を配置するかを指定したい場合は 7 です。
どのようにピクセルを処理するかを学習するには、
getImageData メソッドを読んでください。
チップ:putImageData メソッドで何ができるかは、このページの下部にある例を見てください。
JavaScript 構文
配置するキャンバスに唯一の場所を指定し、図面全体をキャンバス上に配置します:
| JavaScript 構文: |
context.putImageData(imgData,x,y); |
どの描画の一部で、それを置くためのキャンバスはどこかを指定します:
| JavaScript 構文: |
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); |
ブラウザ・サポート
putImageData メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
| imgData |
imgData |
キャンバス上に配置する imageData オブジェクト |
| x |
x-coordinate |
図面を配置するキャンバス内の x 座標 |
| y |
y-coordinate |
図面を配置するキャンバス内の y 座標 |
| dirtyX |
x-coordinate |
キャンバスに配置したい図面の x 座標 |
| dirtyY |
y-coordinate |
キャンバスに配置したい図面の y 座標 |
| dirtyWidth |
width |
キャンバスに配置したい図面の幅 |
| dirtyHeight |
height |
キャンバスに配置したい図面の高さ |
Usage
キャンバスの全ピクセルの色を反転するために putImageData メソッドを使用することができます。
ここに、画像を含むキャンバスの例があります。getImageData メソッドを使用して全ピクセルをループし、
次の式を使用して色の値を変更します:
red = 255 - old_red
green = 255 - old_green
blue = 255 - old_blue
結果は、キャンバスに反転色で描画されたバージョンです:
例
画像の全ピクセルの色を反転します:
Canvas
JavaScript:
... for (i=0; i<imgData.width*imgData.height*4;i+=4) {
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; }
ctx.putImageData(imgData,0,0); ...
HTML5 canvas リファレンス
|