Silverlight で HTML5::Canvas を実装中(今日はテキストAPIを実装)

VMLモードのレンダリングを改善しました。

細かなことは昨日の日記などをご覧下さい。

• Silverlightモードの変更箇所
  • fillText(), strokeText() を実装 (ただし strokeText() は fillText() と同じレンダリングを行う)。
    • A canvas fillText and strokeText example
  • measureText() を実装(width と height を返す)
    • A canvas measureText example

• VMLモードの変更箇所
  • strokeStyle = pattern を実装
    • A canvas createPattern example
  • addColorStop offset値の衝突を回避するコードを追加
    • A canvas linearGradient example
  • radialGradientFill のリテイク
    • A canvas radialGradient example
    • A canvas radialGradient example
    • A canvas LinearGradient and RadialGradient example
  • fillText(), strokeText() を実装
    • A canvas fillText and strokeText example
  • measureText() を実装(width と height を返す)
    • A canvas measureText example

• 互換性の問題とか
  • テキストAPI(fillText,strokeText)を使うときは、textBaseline = "top"; とする必要がある。
    • "top" 以外を指定すると、Silverlight と Firefox3.1 で描画位置が大きく異なってしまう。
    • topを指定してもちょっとずれる。フォント要因もあるので簡単にはいかない。
  • VMLモードでclipが実装できていない。
    • 実装可能かもしれないので、もうちょっとがんばる。

• 仕様書から読み取れない仕様とか
  • ブラウザのテキストのサイズを変更(ズーム)したら、fillText, strokeText も追従すべきか
    • Firefox3.1の実装だと追従しないみたい。
    • 現段階では、Silverlightモードではズームに追従し、VMLモードでは追従しないようにしている。

• 抱えている問題とか
  • textBaseline: フォントの細部にアクセスする手段がないため、行き詰っている。
  • textAlign: HTML5::Canvasの仕様が CSS の text-align と大きく異なるため、まだ実装できていない。
  • globalAlpha を設定した状態で円形グラデーションを描画すると、VMLモードで正しく透過しない。Alphaフィルターでやれないか?

• • fillText(), strokeText() のグラデーション(+パターン)の描画が実装できていない。

実装済みの機能

• clearRect, beginPath, moveTo, lineTo, bezierCurveTo, quadraticCurveTo, rect, strokeRect, fillRect, closePath, createLinearGradient, createRadialGradient, stroke, fill, arc, save, restore, translate, rotate, scale, transform, setTransform, clip, measureText, fillText, font
• CanvasGradient.addColorStop
• CanvasPattern(パターンフィル + タイリング対応)

一部実装済みの機能

• drawImage(HTMLImageElementのみ対応)
• strokeText(VMLモードのみ, Silverlightモードでは、fillTextと同じ結果になる)

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

• ピクセル系(toDataURL, getImageData, putImageData)
• コンポジション系(globalCompositeOperation)

これから検討する機能

• shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, textAlign, textBaseline, isPointInPath, arcTo

反省会

• ShadowとClip(VMLモード)は、もしかして実装できるかもしれない。
• globalCompositeOperation の "destination-over" と "copy" も実装できるかもしれない。