5

私のhtml 5キャンバスでは、テキストを描画します (1 行にする必要があります) が、一定のフォント サイズとスタイルである必要があり、スペースの幅も一定である必要があります。したがって、テキストはそのスペースに収まる必要がありますが、テキストが長すぎてスペースを超えると問題が発生します。

テキストを水平方向に伸縮/圧縮する方法はありますか? （フォトショップのように）

それを画像に変換してから画像の幅を変更するようなものですか？これが最善の方法かどうかはわかりません...

ありがとう

4

2 に答える 2

9

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();
}
于 2012-08-24T16:44:27.693 に答える
2

簡単な解決策は、別の (メモリ内の) キャンバスにテキストを描画し、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);
于 2012-08-24T16:26:41.250 に答える