複雑な画像をキャンバスに描画していて、その画像内の領域の透明度を任意に変更できるようにしたいと考えています。私はそれらの領域を別々のファイルでマスクとして概説しました。これを達成する方法はありますか？
私が考えていたのは、キャンバスをピクセルごとに分析し、問題のピクセルがマスクで囲まれた特定の領域に該当する場合は、それに応じて透明度を変更することでした。しかし、ピクセルがエリア内にあるかどうかを確認する方法がわかりませんか？おそらく、領域ごとに個別のキャンバス要素を設定し、対応するピクセルが存在するかどうかを確認するだけで済みます。しかし、それは不格好に聞こえます。より良い方法はありますか？エレガント？多分いくつかの数学の魔法？または私が知らない方法？
画像のピクセルが黒か白かを確認する場合は、最初にgetImageDataを使用してデータを取得し、次に正しい座標で値（RGBAのために4バイト）を確認する必要があります。
var maskCanvas = document.createElement('canvas');
maskCanvas.width = w;
maskCanvas.height = h;
var context = maskCanvas.getContext('2d');
context.drawImage(yourMaskImage, 0, 0);
var pixels = context.getImageData(0, 0, w, h).data;
画像に(w, h)サイズがある場合、配列のサイズはになり、これを使用しw*h*4て色を取得できるようになります。(x,y)
var i = 4*(x+w*y); //
var color = (pixels[i]<<16) + (pixels[i+1]<<8) + (pixels[i+2]); // I don't care about the alpha
バイト配列を直接操作するため、これは非常に高速です（チェックの間に配列を保持する場合）。
マスクを含む画像は、メインページと同じドメインからのものである必要があることに注意してください。