html5 canvas - テキストを伸ばすにはどうすればいいですか？

Question

私のhtml 5キャンバスでは、テキスト（1行になければならない）を描画しますが、フォントサイズとスタイルが一定である必要があり、スペースの幅も一定です。したがって、テキストはそのスペースに収まる必要がありますが、テキストが長すぎてスペースを過ぎたときに問題が発生します。

テキストを横方向にストレッチ/圧縮する方法はありますか？ （PhotoShopのような）

イメージをイメージに変換してイメージの幅を変更するようなものはありますか？これが最善の方法であるかどうかわからない...

おかげ

Answer 1

簡単な解決策は、別の（メモリ内の）キャンバスにテキストを描画してから実際の宛先キャンバスキャンバスの内容を貼り付けるためにdrawImageメソッドを使用することです。このような

何か（100〜80の割合で伸び、ここで、あなたのニーズに応じて、パラメータ化もしましょう）：

var tempimg = document.createElement('canvas'); 
tempimg.width = 100; 
tempimg.height = 10; 
oc = tempimg.getContext('2d'); 
oc.fillText(...) 
yourdestcontext.drawImage(tempimg, 0, 0, 100, 10, x, y, 80, 10); 

Answer 2

あなたはスケール、その後、最初のテキストのサイズを決定するためにmeasureTextを使用することができます必要に応じてキャンバス：http://jsfiddle.net/eGjak/887/

var text = "foo bar foo bar"; 
ctx.font = "30pt Arial"; 

var width = ctx.measureText(text).width; 
if(width <= 100) { 
    ctx.fillText(text, 0, 100); 
} else { 
    ctx.save(); 
    ctx.scale(100/width, 1); 
    ctx.fillText(text, 0, 100); 
    ctx.restore(); 
}