1363273973 HTML5 Canvas の font プロパティについて教えてください。

フォントとして固定幅フォントを指定しようと思っています。
IE や Forefox では希望通り表示されるのですが、Google Chrome では全角スペースが半角スペースと同じ幅で表示されてしまうようです。
ご存じの方、いらっしゃいましたら、Google Chrome で固定幅フォントで表示させる書き方を教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/03/15 00:12:53
  • 終了:2013/03/22 00:15:04
id:cx20

質問者から

cx202013/03/15 01:15:44

以下、試したサンプルになります。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw()
{
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d"); 
    ctx.font = "20px 'MS ゴシック'";
    ctx.fillText("12345678901234567890", 0, 20); 
    ctx.fillText("----*----+----*----+", 0, 40); 
    ctx.fillText("こんにちは 世界!",    0, 60); 
    ctx.fillText("こんにちは 世界!",   0, 80); 
}
</script>
</head>
<body onLoad="draw()">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

回答(1件)

id:takuyarei0 No.1

takuyarei0回答回数137ベストアンサー獲得回数342013/03/15 20:42:33

ポイント100pt

行の先頭にU+30FBの文字を入れればいいそうです。
http://bardiel-of-may.blogspot.jp/2012/08/chrome-21_19.html

id:cx20

ご紹介頂いたブログの記事は興味深いものでしたが、Canvas では効果無いようでした。

2013/03/15 23:13:55
id:takuyarei0

あらら...。

2013/03/16 14:02:05
  • id:a-kuma3
    ctx.font = "20px 'MS ゴシック', monospace";

    とか。ただの思いつきですが(Google Chorme 入れてない)。
  • id:cx20
    a-kuma3 さん>

    > ctx.font = "20px 'MS ゴシック', monospace";

    試してみましたが、ダメでした。

    ただ、代替え手段を見つけたので、他に良い方法がなければ、その方法で行こうかと思います。

    <思い付いた案>
    全角スペースのサイズを measureText を測ってみると、Google Chrome でも正しく計算できている模様。

    ctx.fillText( ctx.measureText(" ").width, 0, 100); // 10
    ctx.fillText( ctx.measureText(" ").width, 0, 120); // 20

    ということで、1文字ずつ、サイズ計算して、描画してあげれば、
    全角スペースと半角スペースを区別して表示させることが出来そう。

    <サンプルコード>
    drawText( ctx, "こんにちは 世界!", 0, 100 );

    function drawText( ctx, strMessage, x, y )
    {
      for ( var i = 0; i < strMessage.length; i++ )
      {
        var c = strMessage.substr( i, 1 ); // 描画する1文字を取得
        var strPos = strMessage.substr( 0, i ); // 文字列取得(位置計算用)
        var metrix = ctx.measureText(strPos); // サイズ計算
        ctx.fillText( c, x + metrix.width, y); // 算出した位置に1文字描画
      }
    }
  • id:a-kuma3
    >ということで、1文字ずつ、サイズ計算して、描画してあげれば、
    >全角スペースと半角スペースを区別して表示させることが出来そう。
    なんじゃそりゃ (^^;

    canvas を多用するなら、Google Chrome かどうか判定して、もしそうだったら
    CanvasRenderingContext2D.prototype.fillText を置き換え、ですかね...

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません