HTML5のCanvasエレメントをInternetExplorerで使うための2つのライブラリ、ExplorerCanvasとFlashCanvasの機能サポート状況を表にまとめてみた。
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をサポートしていないけど、正式版では対応してくれるといいなあ・・・