HTML5 Canvas の font プロパティについて教えてください。
フォントとして固定幅フォントを指定しようと思っています。
IE や Forefox では希望通り表示されるのですが、Google Chrome では全角スペースが半角スペースと同じ幅で表示されてしまうようです。
ご存じの方、いらっしゃいましたら、Google Chrome で固定幅フォントで表示させる書き方を教えてください。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
みんなの回答
-
cx20
以下、試したサンプルになります。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "20px 'ＭＳ ゴシック'"; 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> -
takuyarei0
満足100pt
行の先頭にU+30FBの文字を入れればいいそうです。
http://bardiel-of-may.blogspot.jp/2012/08/chrome-21_19.html -
takuyarei0この質問へのコメント
質問の情報
- 登録日時
- 2013-03-15 00:12:53
- 終了日時
- 2013-03-22 00:15:04
- 回答条件
- 1人5回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者1
-
内定してほしいポケモンはいますか？匿名質問者
とか。ただの思いつきですが（Google Chorme 入れてない）。
> ctx.font = "20px 'ＭＳ ゴシック', monospace";
試してみましたが、ダメでした。
ただ、代替え手段を見つけたので、他に良い方法がなければ、その方法で行こうかと思います。
＜思い付いた案＞
全角スペースのサイズを measureText を測ってみると、Google Chrome でも正しく計算できている模様。
ctx.fillText( ctx.measureText(" ").width, 0, 100); // 10
ctx.fillText( ctx.measureText(" ").width, 0, 120); // 20
ということで、１文字ずつ、サイズ計算して、描画してあげれば、
全角スペースと半角スペースを区別して表示させることが出来そう。
＜サンプルコード＞
drawText( ctx, "こんにちは 世界！", 0, 100 );
function drawText( ctx, strMessage, x, y )
{
for ( var i = 0; i < strMessage.length; i++ )
{
var c = strMessage.substr( i, 1 ); // 描画する１文字を取得
var strPos = strMessage.substr( 0, i ); // 文字列取得（位置計算用）
var metrix = ctx.measureText(strPos); // サイズ計算
ctx.fillText( c, x + metrix.width, y); // 算出した位置に１文字描画
}
}
＞全角スペースと半角スペースを区別して表示させることが出来そう。
なんじゃそりゃ (^^;
canvas を多用するなら、Google Chrome かどうか判定して、もしそうだったら
CanvasRenderingContext2D.prototype.fillText を置き換え、ですかね...