在canvas與svg的使用中，我們經常需要根據字串的長度來計算文字繪製的起點與終點，常規的方法莫過於使用經驗值，如中文字元長度乘以6（經驗值），英文本元長度乘以3，**示例如下:
// 判斷是否是ascii字元
var pattern = /[\u0000-\u00ff]*/,
// 根據字元的個數來計算字串的長度
width = pattern.test(text) ? text.length * 3 : text.length * 6
充分利用瀏覽器的布局特性可輕鬆解決上述問題：
1. 建立隱藏層（也可重複使用）；
2. 建立字串容器，如span元素；
3. 新增字串；
4. 計算字串容器寬度；
具體實現**如下：
/**
1. @param str 要計算的字串
2. @param fontsize 字串的字型大小
3. 根據需要，還可以新增字型控制，如微軟雅黑與times new roma的字元寬度肯定不一致
*/function
textwidth
(str, fontsize)
// 控制字元的字型大小
textwidth.txt.style.fontsize = fontsize + 'px';
// 設定字元內容
textwidth.txt.textcontent = str;
// 返回計算結果
return textwidth.txt.offsetwidth;
}
// 輸出99
alert(textwidth('國際公尺蘭', 14))
// 輸出85
alert(textwidth('國際公尺蘭', 12))
結合使用dom技術，可輕鬆解決許多svg、canvas繪圖技術無法解決的難題。
windows ui 計算字元寬度
int caltextwidth const cstring strtext,hdc hdc crect rc 0,0,0,0 drawtext hdc,strtext,strtext.getlength rc,dt calcrect dt noprefix return rc.width dt c...
巧用CSS3的calc 寬度計算做響應模式布局
今天瀏覽這個站時，因為好奇看了下人家寫的 結果發現了這行 於是就研究了一下，calc 從字面我們可以把他理解為乙個函式function。其實calc是英文單詞calculate 計算 的縮寫，是 css3的乙個新增的功能，用來指定元素的長度。比如說，你可以使用calc 給元素的border marg...
c 自動計算字串的寬度
測試 string str 字串 var width textrenderer.measuretext str,this font var width2 this.creategraphics measurestring str,this.font str 字串 時，結果為 width width2...