微信小程式之canvas 文字斷行和省略號顯示

文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法，只有通過擷取指定字串來達到目的。

那麼下面就介紹我自己處理的辦法：

wxml：

<

canvas 
canvas-id
='word' 
id='test'
>
canvas
>

js：在page中

//

處理文字多出省略號顯示
dealwords: function
(options)  else
endpos += m;//
下次截斷點
break
;                    }}} 
else }},

（2）(j + 1) * 18中18表示每一行行高是18，這是我自己定義的行高如果這個數值小於定義的字型大小，多半會出現兩行文字重疊的現象，前面的 j+1 表示當前是多少行。整體表示當前行與上一行相比需要加多少距離

（3） 在j===options.maxline-1這個表示最後一行的處理情況裡面   有slice(0，endpos-1)，為什麼這裡要減一，是因為省略號也要佔寬度，大概是11.5的樣子，所以要減掉這個省略號的寬度。因為一般中文字元寬度都和設定的字型大小差不多。如果是英文就要小一點，這裡就沒有考慮這麼精細了。反正減一就是精確度的意思。。。可以自行多減或者少減

（4）endpos += m表示下一次截斷的時候是從**開始。因為每次去截字串都是最初的字串，並沒有真正意義上的截斷一次之後就是剩下的字串了，所以要把每次截斷的點和上一次截斷的點加上，才是最新一次字串截斷的位置。

（5） 迴圈和判斷使用的有點多，不知道對效能有沒有影響。。。。。。

呼叫的時候：

var ctx = wx.createcanvascontext('word');

var name='窗前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。';
this
.dealwords()
ctx.draw();

看一下效果：

（1） canvas我設定的是200 * 200的大小，其它的設定就是上面呼叫的時候設定的

（1） 這是當maxwidth設定為200px的時候的顯示情況。 

完成 (＾－＾)v

微信小程式之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...

微信小程式canvas文字換行效果

我們在canvas上繪製多行文字的時候，不可能一行一行的繪製，這時就需要到了換行這個功能。文字換行 引數 1 canvas物件，2 文字 3 距離左側的距離 4 距離頂部的距離 5 不用管 6 文字的寬度 文字換行 引數 1 canvas物件，2 文字 3 距離左側的距離 4 距離頂部的距離 5 6...

WeZRender 微信小程式Canvas增強元件

canvas增強元件，基於html5 canvas類庫zrender。wxml canvas js var wezrender require lib wezrender zr wezrender.zrender.init line canvas 1 375,600 資料驅動 利用wezrender...