2011年7月17日日曜日

Canvasを使って透過じゃない画像を無理矢理透過して重ねた

muninのグラフを見ていたら、重ねて表示して飛び抜けて変なやつが居ないか確認できたら便利なんじゃないかと思いました。munin側を調べて手を入れてもいいのですが、面倒ですし、どうせブラウザ使って見ているのだからブラウザ上で何とかすればいいと考え、やってみました。

その1. 画像重ねるだけ
globalAlphaを設定してdrawImageするだけです。速い。

その2. グラフだけ重ねる
白(rgb=(255,255,255)のところ)だけalphaを0にして重ねることによってグラフだけが重なって表示された状態にするのですが、当然ながら折れ線グラフじゃないと使えません。
不透明の画像を透明にするためにまず非表示のcanvasにdrawImageして、各画素に対して処理したあと、その結果を表示用のCanvasに重ねて表示しています。遅いです。

一気に全画像を重ねる版
遅いので画像一枚ごとにsetTimeoutする版

0 件のコメント:

コメントを投稿