12

タグを使って簡単な図や表を描く実験をしてきましたが<canvas>、今のところとても使いやすいです。私は1つの問題を考えています。<canvas>Safariでテキストを描画する方法がわかりません。Firefox 3.0 では、次のことができます。

Chart.prototype.drawTextCentered = function(context, text, x, y, font, color) {
  if (context.mozDrawText) {
    context.save();
    context.fillStyle = color;
    context.mozTextStyle = font;
    x -= 0.5 * context.mozMeasureText(text);
    context.translate(x, y);
    context.mozDrawText(text);
    context.restore();
  }
}

Apple の Safari ドキュメントでメソッドへの参照を見fillText()たことがありますが、Safari 3.2 ではサポートされていないようです。これは現在行方不明になっているだけですか、それともよく守られている秘密ですか?

4

4 に答える 4

14

Safari 3.2 がキャンバスでのテキストのレンダリングをサポートしているとは思えません。

このブログによると、Safari 4 ベータ版は、 HTML 5 キャンバス テキスト APIに基づいて、キャンバスへのテキストのレンダリングをサポートしています。

編集: 次のスニペットが Safari 4 ベータ版で動作することを確認しました:

<canvas id="canvas"></canvas>
<script>
    var context = document.getElementById("canvas").getContext("2d");
    context.fillText("Hello, world!", 10, 10);
</script>
于 2009-04-05T23:13:21.410 に答える
4

これは理想的ではありません。お待ちいただいているようですが、参考までに、独自のフォント レンダリングを行うstrokeTextというライブラリがあります。Firefox 1.5 以降、Opera 9 以降、Safari (どのバージョンかはわかりません)、IE6 以降 (キャンバスの代わりに VML を使用) で動作します。

于 2009-04-06T04:41:05.757 に答える
3

本当に HTML5 テキスト メソッドを使用したい場合は、次のライブラリを試してください: http://code.google.com/p/canvas-text/

デモはこちら: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

まだアルファ段階なので、バグレポートやフィードバックは大歓迎です!:)

于 2009-04-17T20:01:23.520 に答える
0

タグを使っ<canvas>てFacebookのロゴを描いているのですが、画像、文字が伸びてしまいます。

<div class="content1">
   <canvas id = "e" class="myCanvas">
    <script>
        var canvas = document.getElementById("e");
        var context = canvas.getContext("2d");
        context.fillStyle = "white";
        context.font = "normal 64px Facebook Letter Faces";
        context.fillText("facebook",10, 100);
    </script>
     FACEBOOK
     </canvas>
</div>

CSS ファイル:

.content1
{
    float:left;
    position:relative;
    width:180px;
    height:120px;
}

.myCanvas
{
    float:right;
    position:relative;
    width:170px;
    height:60px;
    margin-right:5px;
    margin-top:70px;
    background-color:#044692;

}
于 2012-07-20T07:04:16.330 に答える