直接上代码

Page({    /**
     * 渲染文字
     *
     * @param {Object} obj
     */
    drawText: function (obj) {        console.log('渲染文字')        this.ctx.save();        this.ctx.setFillStyle(obj.color);        this.ctx.setFontSize(obj.size);        this.ctx.setTextAlign(obj.align);        this.ctx.setTextBaseline(obj.baseline);        if (obj.bold) {            console.log('字体加粗')            this.ctx.fillText(obj.text, obj.x, obj.y - 0.5);            this.ctx.fillText(obj.text, obj.x - 0.5, obj.y);
        }        this.ctx.fillText(obj.text, obj.x, obj.y);        if (obj.bold) {            this.ctx.fillText(obj.text, obj.x, obj.y + 0.5);            this.ctx.fillText(obj.text, obj.x + 0.5, obj.y);
        }        this.ctx.restore();
    },    /**
     * 文本换行
     *
     * @param {Object} obj
     */
    textWrap: function (obj) {        console.log('文本换行')        var td = Math.ceil(obj.width / (obj.size));        var tr = Math.ceil(obj.text.length / td);        for (var i = 0; i < tr; i++) {            var txt = {                x: obj.x,                y: obj.y + (i * obj.height),                color: obj.color,                size: obj.size,                align: obj.align,                baseline: obj.baseline,                text: obj.text.substring(i * td, (i + 1) * td),                bold: obj.bold
            };            if (i < obj.line) {                if (i == obj.line-1){
                    txt.text = txt.text.substring(0, txt.text.length - 3) +'......';
                }                this.drawText(txt);
            }
        }
    },
})

参数说明

drawText：

let title = {    x: 40,    y: 524,    color: '#333333',    size: 32,    align: 'left',    baseline: 'top',    text: '哈哈哈哈，加粗',    bold: true};this.drawText(title);

参数	类型	说明
x	Number	绘制文本的左上角x坐标位置
y	Number	绘制文本的左上角y坐标位置
color	Color	字体的颜色
size	Number	字体的字号
参数 类型 说明 x Number 绘制文本的左上角x坐标位置 y Number 绘制文本的左上角y坐标位置 width Number 文本区域宽度 height Number 文本行高 line Number 最多显示几行 color Color 字体的颜色 size Number 字体的字号 text String 在画布上绘制被填充的文本。 bold Boolean 是否加粗 效果 生成图片效果 注意，以上是简单的实现，所以如果有英文会计算不精确，解决方法如下： 优化原理：通过基础库 1.9.90 开始支持的measureText接口返回的文本宽度，把每个字符宽度不断累加，精确计算在哪个位置应该换行去实现这个功能。 /**  * 获取文本折行  * @param {Object} obj  * @return {Array} arrTr  */getTextLine: function(obj){    this.ctx.setFontSize(obj.size);    let arrText = obj.text.split('');    let line = '';    let arrTr = [];    for (let i = 0; i < arrText.length; i++) {        var testLine = line + arrText[i];        var metrics = this.ctx.measureText(testLine);        var width = metrics.width;        if (width > obj.width && i > 0) {             arrTr.push(line);             line = arrText[i];         } else {             line = testLine;         }        if (i == arrText.length - 1) {             arrTr.push(line);         }     }    return arrTr; }, 参数 类型 说明 width Number 文本区域宽度 size Number 字体的字号 text String 在画布上绘制被填充的文本。 之后，textWrap方法改为： /**  * 文本换行  *  * @param {Object} obj  */textWrap: function (obj) {    console.log('文本换行')    let tr = this.getTextLine(obj);    for (let i = 0; i < tr.length; i++) {        if (i < obj.line){            let txt = {                x: obj.x,                y: obj.y + (i * obj.height),                color: obj.color,                size: obj.size,                align: obj.align,                baseline: obj.baseline,                text: tr[i],                bold: obj.bold             };            if (i == obj.line - 1) {                 txt.text = txt.text.substring(0, txt.text.length - 3) + '......';             }            this.drawText(txt);         }     } }, 效果 有英文字母生成图片效果 注：在开发工具截取圆形会失效，这张是开发者工具生成的，第一张是真机生成的。 优化前后对比 优化前后对比 补充，字体加粗 基础库 1.9.90 开始支持设置字体样式 canvasContext.font canvasContext.font = value value 支持的属性有： 属性 说明 style 字体样式。仅支持 italic, oblique, normal weight 字体粗细。仅支持 normal, bold size 字体大小 family 字体族名。注意确认各平台所支持的字体 加粗如果是不需要兼容的话直接用这个属性就好了，如果需要兼容低版本库，就用重复渲染的方式，希望小程序后续支持多行文本换行吧~ 优化待续... 作者：不二很纯洁 链接：https://www.jianshu.com/p/8cadcd731c9f 點擊查看更多內容 發表于 2018.07.01 11:39， 共 11327 人瀏覽 本文原創發布于慕課網 ，轉載請注明出處，謝謝合作 舉報 為 TA 點贊 若覺得本文不錯，就分享一下吧！ 評論 評論 共同學習，寫下你的評論 評論加載中... 展開查看更多評論 作者其他優質文章 正在加載中 UYOU 手記 篇 粉絲 88 獲贊與收藏 461 關注作者，訂閱最新文章 閱讀免費教程 JavaScript 入門教程 80個小節 320821 2270 后端通用面試教程 41個小節 32074 358 網絡編程入門教程 20個小節 13196 249 推薦 1 收藏 共同學習，寫下你的評論 感謝您的支持，我會繼續努力的～ 掃碼打賞，你說多少就多少 贊賞金額會直接到老師賬戶 支付方式 打開微信掃一掃，即可進行掃碼打賞哦 今天注冊有機會得 100積分直接送 付費專欄免費學 大額優惠券免費領 立即參與 放棄機會 點擊 抽獎 慕課手記新用戶專享福利 恭喜你，你的運氣太好了，居然抽中了 100個積分！ 恭喜你，抽中了價值 元的專欄 ！ 太棒了， 直接落到你賬戶里！ 積分商城里的羅技鼠標、機械鍵盤、 Kindle 閱讀器、小米平衡車 Apple iPad （10.2英寸）、大額優惠券 在等著你去兌換了噢 作者： 免費贈送 兌換碼：1111222211 復制 優惠券可用于購買實戰課、體系課 無門檻使用 先去看看，有什么好東西 馬上兌換 我愛學習，選課去  微信客服 購課補貼 聯系客服咨詢優惠詳情 幫助反饋 APP下載 慕課網APP 您的移動學習伙伴 公眾號 掃描二維碼 關注慕課網微信公眾號 返回頂部 舉報 0/150 提交 取消