最近真是画了一堆canvas海报画到头秃~~~（偷偷说！！产品经理我恨你！！）

来和大家分享一波本媛写的canvas方法封装

1、封装图片

//width:图片长度
//height:图片高度
//x:离左边的距离
//y:离上边的距离
//img:图片路径imgChange(ctx, canvas, width, height, x, y, img) {const headerImg = canvas.createImage();headerImg.src = img;headerImg.onload = () => {ctx.drawImage(headerImg, x, y, width, height);}}

2、字体长度

//title:字体
//length：控制字体数量（用不到可以删了）
fontwidth(ctx, title,length) {var l = 18if(length){l = length}if (title.length > l) {title = title.substr(0, l) + '...'//超出一定字数隐藏}const onetitle = ctx.measureText(title)return onetitle.width
},

3、字体

//title:字体
//color:颜色
//size:字体样式（格式 同css font）
//fizelength：限制字体长度
font(ctx, title, x, y, color, size,fizelength) {ctx.fillStyle = colorif (size) {ctx.font = size}if(!fizelength){fizelength = 18}if (title.length > fizelength) {title = title.substr(0, fizelength) + '...'}ctx.fillText(title, x, y)}

重点！！！

图片导出时候会出现图片和字体模糊

在创建画布的时候记得

const dpr = wx.getSystemInfoSync().pixelRatio//获取当前设备像素

canvas.width = res[0].width * dpr

canvas.height = res[0].height * dpr

（宽高都要乘以dpr哦~~~）

--------------2022-06-09 

补充 ：canvas的长宽需要和css中设置的长宽一致哦~~~

         （不一致的话，安卓没问题，ios海报导出会缺少的）

好了就是这样~~创建画布就不写了指步小程序文档