いままでJavascriptでできるとは知りませんでした…すごい
どんなことができるの?
ピクセル単位でRGBAを取得、設定出来ます。これを使えば赤いところは透過するなどといったことができます。
やり方
まずはcanvasを取得、getContext("2d")をするところまではいつもどおりのcanvasです。そしたらgetImageDataメソッドを使います。引数には右上のx座標、y座標、左下のx座標、y座標を渡します。
あとは返ってきたデータをほふるだけです。
注意
返ってくるのはRGBAを合わせた一次配列です。つまり[R,G,B,A,R,G,B,A]という順に並んでいるので、forで回すときに工夫が必要です。といってもfor(var i=0;i<data.length;i+=4)とi++のところを4にするだけですが。
終わりに
これは色々とできることが広がりそうです。知らなかったことを後悔してます。
