2010年05月02日

ExploerCanvasとFlashCanvasの比較表

HTML5のCanvasエレメントをInternetExplorerで使うための2つのライブラリ、ExplorerCanvasFlashCanvasの機能サポート状況を表にまとめてみた。

HTMLCanvasElement

  ExplorerCanvas FlashCanvas FlashCanvas Pro
width
height
getContext()
toDataURL() ×

CanvasRenderingContext2D

  ExplorerCanvas FlashCanvas FlashCanvas Pro
addColorStop()
arc()
arcTo() ×
beginPath()
bezierCurveTo()
clip() ×
closePath()
clearRect() △※引数を無視してCanvas全体を消去
createLinearGradient()
createImageData() × ×
createPattern()
drawImage() △※ソースはimageエレメントのみ △※ソースはimageエレメントのみ
fill()
fillRect()
fillStyle
fillText() ※要canvas-text ×
font ※要canvas-text ×
getImageData() × × ○※遅い
globalAlpha
globalCompositeOperation × ×
isPointInPath() × ×
lineJoin
lineTo()
lineWidth
measureText() ※要canvas-text ×
miterLimit
moveTo()
putImageData() × × ○※遅い
quadraticCurveTo()
rect()
restore()
save()
scale()
setTransform()
shadowBlur × ×
shadowColor × ×
shadowOffsetX × ×
shadowOffsetY × ×
stroke() ×
strokeRect()
strokeText() ※要canvas-text ×
textAlign × ×
textBaseline × ×
transform
translate()

その他

  ExplorerCanvas FlashCanvas FlashCanvas Pro
ライセンス オープンソース
(Apache License V2.0)
オープンソース
(The MIT License)
クローズドソース
(非営利使用は無償、商用使用は有償)
Canvas代替技術 VML Flash Player 9 Flash Player 10 (Flash Player 9 もサポート)

注意点

これらライブラリの使用により、Canvasエレメントを使ったページがすべて無改造で動くわけではない。
サポートされていない機能が使えないのはもちろんだけど、他にも細かい動作の違いは多々ある。
特に注意が必要なのは、document.createElement("canvas")などでCanvasを動的に生成する場合だ。
ExplorerCanvasなら var canvas = document.createElement("canvas"); document.getElementById("target").appendChild(canvas); if (typeof initElement != "undefined") { canvas = initElement(canvas); } FlashCanvasだと var canvas = document.createElement("canvas"); document.getElementById("target").appendChild(canvas); if (typeof FlashCanvas != "undefined") { FlashCanvas.initElement(canvas); } のようにおまじないが必要になる。
このおまじないは、CanvasエレメントをdocumentのDOMツリー内にバインドしてから行う必要がある。
Canvasエレメントをどこにもappendせずに作業用のフレームバッファとして扱いたい場合は面倒だ。


まとめ

lislis PainterをIE対応にできないものかと思って調べてみたけど、現状ではどちらも肝心な機能が欠けているので使えないと結論。
InternetExplorer 9のPreview版でも、Canvasをサポートしていないけど、正式版では対応してくれるといいなあ・・・

posted by lislis at 22:21| Comment(0) | TrackBack(0) | HTML5