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(); 
}