Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2008-11-14

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

no title にある、ほとんどのサンプルを正確に描画できるようになりました(globalCompositeOperation は 除く)。

サンプルを見る前に

Silverlightインストールしていない方は、こちらからダウンロードしてインストールしてください。

Silverlight のインストール

アンインストールは、[コントロールパネル]-[プログラムの追加と削除]から簡単にできます(再起動不要)。

サンプルはこちら

http://pigs.sourceforge.jp/blog/200811140144/uupaa-canvas.js/demo/

f:id:uupaa:20081114015743p:image

Silverlightインストールされた状態のIEでサンプルを開くと、左がSilverlight, 右がVMLでレンダリングされます。

Silverlightが無ければ、左右どちらもVMLでレンダリングされます。

IE以外のブラウザでは、左右どちらもcanvasレンダリングされます。

Silverlight上に実装したcanvasの動作に注目です。

もっとサンプル

注意: IEで見ないと違いが分かりませんよ。


反省会

  • 実装開始から早10日(2〜3日さぼってたので)。
    • 14時間x10日として、140時間ぐらい費やしてるわけですか…もったいない。
  • タイリングは自前で(遅くなるからタイリングをOFFできるようにもした)
    • 出来ないと思うから出来ないのであって、出来ると思って探せば方法はあるもんだね。
    • ただ、パターンを使ったstrokeは未サポート(ちびた画像じゃなくて、最初からでかい画像を用意すればいいので、実用上問題なし)
  • 開発PC上は、Opera9.5 + HTML5::Canvas よりも IE6 + Silverlight のほうが早い。
  • IE8β2で標準準拠モード(IE8モード)だとVML(excanvas)が使えないから、たぶんこのライブラリがIE8でHTML5::Canvas を実運用可能な世界で唯一の実装と思われ。