Silverlight で HTML5::Canvas を実装した

11/1 の思いつきから始まった「Silverlight + VML = HTML5::Canvas」も、やっと一段落しました。

実装済みの機能

• clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, drawImage(キャンバスのコピーは未実装), createLinearGradient, createRadialGradient, stroke, fill, arc, save, restore, translate, rotate, scale, transform, setTransform, clip, measureText(maxWidthは非サポート), fillText, strokeText(SilverlightではfillTextと同じ動作,maxWidthは非サポート), font, textAlign, globalCompositeOperation("source-over", "destination-over", "copy" をサポート)
• CanvasGradient.addColorStop
• CanvasPattern

実装(しない|できない)機能

• ピクセル系(toDataURL, getImageData, putImageData)
• Shadow系(shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY)
• TextAPI系(textBaseline)
• その他(isPointInPath, arcTo)

動作検証(SilverlightをインストールしたIEで見てください)

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

サンプルの多くはMDC Canvas チュートリアル - Web API | MDN をお手本にしています。

細かなことは、過去の日記Silverlight で HTML5::Canvas を実装中 - latest logを参照してください。

リリース予定とか

ドキュメントが皆無なので、それらの作業が終わってからリリースしようと思います。
「今すぐ使いたい!」等の要望も特に無いようなので、マイペースで行きます。

反省会

• clip はハンサムスーツじゃない方法で実装しなおした。
• shadow は実装可能だけど、現実的な速度が出ない気がするしメンドクサイので今は、やんない。
• fillText と strokeText が最も大変だった。ctx.font = "32pt Arial"; ってやってんのに、Firefox3.1とSilverlightとVMLでまったく違う描画結果になるところからスタート。
  • 同じ描画となるよう(実用可能な品質となるように)描画を合わせこむ作業に丸1日費やしている。