微信小程序canvas画图、文字、字体换行，以及保存图片到本地的坑

最新推荐文章于 2025-07-17 11:22:49 发布

原创

最新推荐文章于 2025-07-17 11:22:49 发布 · 1w 阅读

22 ·

CC 4.0 BY-SA版权

页面：

<canvas style="width: 376px; height: 530px; background-color:#ddd;position:absolute;left:-1000px;" canvas-id="myCanvas"></canvas>

步骤 1：网络图片，canvas画图必须先把图片下载到本地才可以使用

var ctx = wx.createCanvasContext('myCanvas');
wx.showLoading({
   title:'图片下载中'
})
wx.downloadFile({
    url:this.drawbg,
    success:(res)=>{
       var saveurl = res.tempFilePath;
       ctx.drawImage(saveurl, 0, 0, 376, 580);
       ctx.drawImage(this.code, 290, 423, 55, 55);
       //字体
       ctx.font = 'normal 11px sans-serif';
       ctx.setFontSize(16);
       ctx.setFillStyle('#fff');
       ctx.fillText(this.drawprecent + '，评测等级为', 25, 68);
       //字体换行
       this.drawText(ctx, this.drawcontent, 30, 350, 200, 307);
       ctx.draw(false,function(){                                
         wx.canvasToTempFilePath({ //生成图片
             x: 0,
             y: 0,
             quali