Hatena::ブログ(Diary)

風と宇宙とプログラム このページをアンテナに追加 RSSフィード

2010-10-24

Canvasのイメージ拡大描画について比較してみた

CanvasのdrawImage APIは下図のように、ソースイメージ中の任意の矩形領域をCanvas領域中の任意の大きさの矩形にマッピングできます。

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

このAPIによって、イメージの部分領域の縦・横方向の拡大縮小が自由にできるようになっています。

今回は、この拡大機能がちょっと気になったので以下のブラウザの各バージョンで調べてみました。

Firefox Chrome Safari Opera
3.6.11 8.0.552.11 dev 5.0.2 10.63

調べたのは、下のような赤と青が1ピクセル毎に交互に描かれているイメージを拡大したときの補間の表現です。

このイメージを下記表のように拡大してみました。

5倍 10倍 20倍
40倍 80倍 160倍
320倍 640倍 1280倍

以下のような結果になりました。

Firefox

きれいに補間されてグラデーションになります。


Chrome

グラデーションが縞模様になっています。また、拡大率が他と比較して低く、周辺の描画がちょっと変です。


Safari

Chromeと同じようにグラデーションが縞模様になっています。縞の幅がChromeより大きいです。


Opera

Firefoxと全く同じに見えます。


イメージをこんなに極端に拡大することはほとんどないため、特に問題はないと思いますが、ちょっと面白い結果です。ちなみに、imgタグで拡大したときのグラデーションも似たような結果になりました。

実際のコードはこちらをご覧ください。

revulorevulo 2010/11/07 02:38 mindcat さんが今までに公開された Canvas の test case を、次のような形で利用したいと考えています。このうちのどちらかだけでも良いので、許可をいただけないでしょうか?

・FlashCanvas Pro の配布ファイルへの同梱
・http://flashcanvas.net/example への掲載

配布する予定のファイルは、http://download.revulo.com/Canvas/mindcat.zip にまとめてありますが、

・目次用の index.html を追加
・IE9 への対応
・Pixel Quality のテストが Opera でも動くように改良
・その他、IE では動かない箇所の修正

といった変更を私の方で加えています。お時間のある時で構いませんので、ご確認いただけると幸いです。

mindcatmindcat 2010/11/11 01:59 @revuloさん、ライセンスを明記していないため、かえって煩わせてしまったようですが、基本的に自由に使って頂いて構いません。いろいろ見ていただいているようでありがとうございます。

revulorevulo 2010/11/11 05:14 どうもありがとうございます。「IE も Flash も嫌い」という意見の方もいらっしゃるので、たとえライセンスが書いてあっても、こういう使い方をして良いかどうか、一応確認を取るようにしています。
mindcat さんの作るテストは、いつも痛いところを突いてくるので、そのおかげで FlashCanvas のバグを見つけることができ、本当に助かっています。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/mindcat/20101024/1287940734