/**
*【drawtxt】canvas 繪製多行文字
*【todo: 中英混排且考慮單詞截斷...】
* * @param context 繪製上下文環境 【必傳】
* @param scale 縮放比 windowwidth / 750
* @param text 文字內容
* @param broken 單詞是否截斷顯示 【true 如果不考慮英文單詞的完整性 適用於所有情況】 【false 考慮英文單詞的完整性 僅適用於純英文】
* @param fillstyle 文字顏色
* @param fontsize 文字大小
* @param x 文字左上角x座標
* @param y 文字左上角y座標
* @param lineheight 行高
* @param maxwidth 最大寬度
* @returns 此次繪製文字的高度 單位: px
*/function drawtxt()
// 比例計算正確的尺寸
for (let item in rest)
// 獲取計算後的值
let =
// 設定字型樣式
context.settextalign('left')
context.settextbaseline('top')
context.setfillstyle(fillstyle)
context.setfontsize(fontsize)
// broken: true 如果不考慮英文單詞的完整性 適用於所有情況
// broken: false 考慮英文單詞的完整性 僅適用於純英文
//【todo: 中英混排且考慮單詞截斷...】
let splitchar = broken ? '' : ' '
let arrtext = text.split(splitchar)
let line = ''
let linescount = 0
for (var n = 0; n < arrtext.length; n++) else
} linescount++
context.filltext(line, x, y)
return linescount * lineheight
}//【drawtxt example】
// let drawtxtheight = drawtxt()
// console.log(`此次繪製總高度：$px`)
微信小程式 canvas繪製文字實現自動換行
我們只能設定文字的最大寬度，這就產生一定的了問題。如果我們繪製的文字長度不確定或者我們希望文字超出自動換行或者用 我們只能設定文字的最大寬度，這就產生一定的了問題。如果我們繪製的文字長度不確定或者我們希望文字超出自動換行或者用省略號表示，光靠這個api是無法完成的。下面本人就講下我在開發中是如何解決...
WeZRender 微信小程式Canvas增強元件
canvas增強元件，基於html5 canvas類庫zrender。wxml canvas js var wezrender require lib wezrender zr wezrender.zrender.init line canvas 1 375,600 資料驅動 利用wezrender...
微信小程式之canvas
initcanvas 複製 rem px 複製 opt.x opt.y x,y是矩形的起點 opt.w opt.h w,h是矩形的寬高 opt.color 顏色 ffffff opt.opacity 透明度 1 opt.fill 是否填充 false drawrect opt else ctx.re...