Silverlight で HTML5::Canvas を実装中
追記: サンプルを追加しました。
- 実装済みの機能
- clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, createLinearGradient, createRadialGradient, stroke, fill, arc, save, restore, translate, rotate, scale, transform, setTransform, clip
- CanvasGradient.addColorStop
- CanvasPattern(パターンフィル + タイリング対応)
- 一部実装済みの機能
- drawImage(HTMLImageElementのみ対応)
- 実装できない機能
- これから検討する機能
- measureText, fillText, strokeText, font, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, textAlign, textBaseline, isPointInPath, arcTo
Canvas チュートリアル - Web API | MDN にある、ほとんどのサンプルを正確に描画できるようになりました(globalCompositeOperation は 除く)。
サンプルを見る前に
Silverlight をインストールしていない方は、こちらからダウンロードしてインストールしてください。
Silverlight のインストール
アンインストールは、[コントロールパネル]-[プログラムの追加と削除]から簡単にできます(再起動不要)。
サンプルはこちら
http://pigs.sourceforge.jp/blog/200811140144/uupaa-canvas.js/demo/
Silverlightがインストールされた状態のIEでサンプルを開くと、左がSilverlight, 右がVMLでレンダリングされます。
Silverlightが無ければ、左右どちらもVMLでレンダリングされます。
IE以外のブラウザでは、左右どちらもcanvasでレンダリングされます。
Silverlight上に実装したcanvasの動作に注目です。
反省会
- 実装開始から早10日(2〜3日さぼってたので)。
- 14時間x10日として、140時間ぐらい費やしてるわけですか…もったいない。
- タイリングは自前で(遅くなるからタイリングをOFFできるようにもした)
- 出来ないと思うから出来ないのであって、出来ると思って探せば方法はあるもんだね。
- ただ、パターンを使ったstrokeは未サポート(ちびた画像じゃなくて、最初からでかい画像を用意すればいいので、実用上問題なし)
- 開発PC上は、Opera9.5 + HTML5::Canvas よりも IE6 + Silverlight のほうが早い。
- IE8β2で標準準拠モード(IE8モード)だとVML(excanvas)が使えないから、たぶんこのライブラリがIE8でHTML5::Canvas を実運用可能な世界で唯一の実装と思われ。
