スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

canvasのglobalCompositeOperationの計算式らしきもの

(5/13追記あり)

canvas(HTML5)のglobalCompositeOperationがどういう計算をしているか気になったので調べた。

以下は、webkitのソースをGoogleコードサーチで検索した結果。

globalCompositeOperationはCanvasRenderingContext2D#setGlobalCompositeOperationで実装されていると思われる。ここからGraphicsContext#setCompositeOperationが呼ばれているが、GraphicsContextは各プラットフォーム毎に実装されるものらしく#if PLATFORM(xxx)が沢山並ぶなんとも面倒そうな感じ。とりあえずAndroidで使われているskiaというライブラリを使う実装を見るとglobalCompositeOperationの値とskiaの合成モードの変換表とskiaの合成モードでの変換式をコメント中に発見

きれいに整形したり、転載するのはめんどうなので、知りたい方は上記リンクを確認してください。



追記1:
Alphaが入っていない場合は、よくある解説そのままで問題なし。知りたかったのはAlphaが入っている場合の挙動。

追記2:
さらに調べた結果、
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010609.html
を発見。

Chrome/Safariで確認したところ、darker以外はここに書いてある式ほぼそのままだった。
(ただしsource-in,destination-inに微妙に誤差がある)
上記に書いてあるとおり、darkerはブラウザによって実装がまちまち。

試行錯誤の結果、

Chrome:
aO = 1 - (1-aA)*(1-aB)
cO = Math.min( (1-aA)*cB + cA, (1-aB)*cA + cB)

Safari:
aO = aA + aB
CO = 1 - ((1-CA)*aA + (1-CB)*aB) / aO (上記ページとは違い最後の "/ aO" がないと合わない)

Firefox:
aO = 1 - (1-aA)*(1-aB)
CO = ????

であることが判明。FirefoxのCOは力尽きたので不明。
スポンサーサイト

コメント

非公開コメント

プロフィール

fchiba

Author:fchiba
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。