canvas的文字不会自动换行,不能像css一样去操控布局
canvas
//首先需要一个canvas<canvas canvas-id="acanvas" class="canvas"></canvas>
//在js中需要创建对象const context = wx.createCanvasContext('acanvas')
let title = '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'let ostrtxt = ''let olinenum = 0let oarrtxt = []context.setFontSize(24)context.setFillStyle('#000')context.setTextAlign('center')for (let i = 0; i < title.length; i++) {ostrtxt = ostrtxt + title[i]let ometricsw = context.measureText(ostrtxt) //计算字符宽度if (ometricsw.width > 700) {//设置每行的宽度olinenum++oarrtxt = oarrtxt.concat([ostrtxt])ostrtxt = '';}}oarrtxt = oarrtxt.concat([ostrtxt])将生成的数组画到画布上for (let j = 0; j < oarrtxt.length; j++) {context.fillText(oarrtxt[j], 0, j * 64, 1050)}//参数后面的计算主要是分行,例如按照行高64去划分。//最后创生成画布context.draw(false, function() {setTimeout(function() {//如果图片内容过多,这块要加定时器,否则样式错乱wx.canvasToTempFilePath({x: 0,y: 0,width: 1080,height: 1800,destWidth: 1080,destHeight: 1800,canvasId: 'acanvas',success(res) {},fail(res) {wx.showToast({icon: 'none',title: '生成图片失败,可重试',})}})}, 100)})
微信小程序 canvas绘制文本换行
微信小程序canvas绘制多行文本方法
小程序canvas文本绘制自动换行、字体加粗简单实现
