canvas的文字不会自动换行,不能像css一样去操控布局
canvas
//首先需要一个canvas
<canvas canvas-id="acanvas" class="canvas"></canvas>
//在js中需要创建对象
const context = wx.createCanvasContext('acanvas')
let title = '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'
let ostrtxt = ''
let olinenum = 0
let 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文本绘制自动换行、字体加粗简单实现