キャンバスに表示する文字の横幅を取得する
説明
キャンバスに表示する文字の横幅を取得するには文字のサイズや書体などを設定した後にmozMeasureText()を使います。mozMeasureText()のパラメータに横幅を計測したい文字列を指定します。戻り値は数値で単位はピクセルになります。
サンプルプログラム
window.onload = function(){
document.getElementById("drawCanvasText").onclick = function(){
initCanvas();
var n = textDraw(document.getElementById("aText").value);
document.getElementById("result").innerHTML = n;
}
initCanvas();
}
function initCanvas(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0,0,255,1)"; // 青色にする
context.fillRect(0,0,640,480); // 塗りつぶす
}
function textDraw(txt){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.save(); // 現在の状態を保存
context.fillStyle = "rgba(255,255,255,1)";
context.mozTextStyle = "36pt bold sans serif";
context.translate(70,240);
context.mozDrawText(txt); //
context.restore(); // 以前の状態を復活
return context.mozMeasureText(txt);
}