canvasの不思議な使い方

キャンバスにはこのゲームの不思議な方法があります。canvas内の画像の一つの画素点のない色の値を取得し、変更することができる。
いろいろなフィルターのアルゴリズムがあれば。canvasで写真のフィルタ変換ができます。美図秀麗のような機能ができます。
使用方法:
1：まず画像をキャンバスに導入します。
2：var canvasData=context.getImageData（0，0，canvas.width，canvas.height）；  //これを使って画像の各ピクセルポイントの情報を取得して、1つの配列が得られます。注意された情報は[r，g，b，a]，[r，g，b，a]のような二次元配列ではなく[r，g，b，a，r，b，a，a]のようなrgba順に配列された単一の配列である。
3：このステップは各ピクセルのrgbaを変更し始めます。ここではグレースケール効果のアルゴリズムと実装手順を簡単に紹介します。

function gray(canvasData)
{
for ( var x = 0; x < canvasData.width; x++) {
 for ( var y = 0; y < canvasData.height; y++) {
 // Index of the pixel in the array
 var idx = (x + y * canvasData.width) * 4;
 var r = canvasData.data[idx + 0];
 var g = canvasData.data[idx + 1];
 var b = canvasData.data[idx + 2];
 var gray = .299 * r + .587 * g + .114 * b;
 // assign gray scale value
 canvasData.data[idx + 0] = gray; // Red channel
 canvasData.data[idx + 1] = gray; // Green channel
 canvasData.data[idx + 2] = gray; // Blue channel
 canvasData.data[idx + 3] = 255; // Alpha channel
 // add black border
 if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8)) 
 {
  canvasData.data[idx + 0] = 0;
  canvasData.data[idx + 1] = 0;
  canvasData.data[idx + 2] = 0;
 }
 }
}
return canvasData;
}

4:context.put ImageData（canvasData、0、0）；ピクセルの色の値を処理し終わったら、この一言でキャンバスを塗り替えてください。
これらのコードは画像を白黒効果のコードに変換します。具体的にどのぐらいの効果を実現できるかはあなたが把握しているフィルタアルゴリズムのどれぐらいですか？
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。