微信小程序canvas绘图运用案例总结

一、canvas建议使用hidden进行隐藏或者显示

如实使用wx:if 无法在原canvas进行第二次绘图

<view style="padding:30px 0;" hidden="{{custem_space.canvarsta}}">
  <canvas canvas-id='space_img' style='width:{{custem_space.canvas_w}};height:{{custem_space.canvas_h}};'></canvas> 
</view>

二、canvas的高度可以在draw之前进行修改正到合适高度

三、绘图网络图片时注意以下问题：

（一）添加设置：
在开发者后台，找到开发–》服务器域名管理，在其添加网络图片的域名地址
（二）刷新配置
添加完域名地址之后，在开发者工具右侧详情-》项目配置-》刷新配置
（三）使用网络地址
完成设置，这样小程序才能合法下载和绘图网络图片
（四）使用案例：wx.downloadFile()

wx.downloadFile({
      url: '网络图片地址',
      success: res => {
        if (res.statusCode === 200) {
          console.log('下载成功')
          //图片成功下载到本地，使用此图片地址进行绘制
           var imgUrl = res.tempFilePath;
        }
      },
      fail: res => {
        console.log('下载失败')
      }
});

四、注意图片对设备的适配性

（一）根据宽度设置画布高度
（二）根据宽度元素尺寸
（三）最重要：canvas画布一定要比设备尺寸大2倍，否则，有些设备图片会出现锯齿

wx.getSystemInfo({
      success: res => {
         //画布一定要比设备尺寸大2倍
        var custem_space = that.data.custem_space;
         var canvas_w = res.screenWidth * 2;
		 var canvas_h = canvas_w * 2;
		 custem_space.canvas_w = canvas_w +"px";
		 custem_space.canvas_h = canvas_h +"px";
        that.setData({
          custem_space: custem_space
        });
		 
		 //设置画图信息
		 var unit = res.screenWidth / 375;
		 var pace_img_top = "../../images/pace_img_top.png";
		 var ctx = wx.createCanvasContext('space_img');
		 //顶部图片
		 ctx.drawImage(pace_img_top, 0, 0, unit * 375, unit * 107);
    }
})

五、绘制圆形头像

ctx.save();
 ctx.beginPath();
 ctx.arc(unit * 318, unit * 44, unit * 16, 0, unit * Math.PI * 2, false);
 ctx.clip();
 ctx.drawImage(userimg, unit * 300, unit * 24, unit * 36, unit * 36);
 ctx.restore();

六、ctx.draw()之后图片不完整或者偏离问题

（一）ctx.draw完之后有个回调函数，因为小米和华为手机兼容问题，需要过一段时间（测试1秒后正常）再使用wx.canvasToTempFilePath()，否则会出现绘制不完整或则偏离正常位置的情况

ctx.draw(false, function () {
      setTimeout(function () { 
          wx.canvasToTempFilePath({})
    },2000)
})

完整案例展示

 //获取用户设备信息，屏幕宽度
wx.getSystemInfo({
      success: res => {
         //canvas画布一定要比设备尺寸大2倍
         var custem_space = that.data.custem_space;
         var canvas_w = res.screenWidth * 2;
		 var canvas_h = canvas_w * 2;
		 custem_space.canvas_w = canvas_w +"px";
		 custem_space.canvas_h = canvas_h +"px";
         that.setData({
            custem_space: custem_space
         });

        //设置画图信息
        var unit = canvas_w  / 375;
        var pace_img_top = "../../images/pace_img_top.png";
        var xcx_ewm = "../../images/xcx_ewm.png";
        var userimg = "../../images/userimg.png";
        var ctx = wx.createCanvasContext('space_img');

        //设置画布背景
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0,canvas_w, canvas_h);
        //顶部图片
        ctx.drawImage(pace_img_top, 0, 0, unit * 375, unit * 107);
        //顶部文案
        ctx.setFontSize(unit * 30);
        ctx.setFillStyle("#fff");
        ctx.fillText("我是主要标题", unit * 25, unit * 50);
        ctx.setFontSize(unit * 16);
        ctx.setFillStyle("#fff");
        ctx.fillText("我是副标题", unit * 25, unit * 80);
        ctx.setFontSize(unit * 14);

        //绘制圆形头像
        ctx.save();
        ctx.beginPath();
        ctx.arc(unit * 318, unit * 44, unit * 16, 0, unit * Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(userimg, unit * 300, unit * 24, unit * 36, unit * 36);
        ctx.restore();

        //设置用户名称,并且指定位置自适应居中
        var runer = '我叫MT';
        runer = runer.split('');
        runer = runer[0] + '***' + runer[runer.length - 1];
        var runner_center = unit * 320;//指定位置
        var font_half_len = (ctx.measureText(runer).width) / 2;
        var runner_wd = runner_center - font_half_len; //居中设置
        ctx.fillText(runer, runner_wd, unit * 80);

        //设置表格--标题
        ctx.setFontSize(unit * 14)
        ctx.setFillStyle("#63C0AC")
        ctx.fillText("标题", unit * 30, unit * 130)
        ctx.fillText("标题", unit * 100, unit * 130)
        ctx.fillText("标题", unit * 180, unit * 130)
        ctx.fillText("标题", unit * 284, unit * 130)

        //设置表格--列表
        var space_list = custem_space.space_list;
        var aver_space = '底部文案';
        var space_len = space_list.length;
        ctx.setFontSize(unit * 14)
        var list_bgtop_size = unit * 144;
        for (let i = 0; i < space_len; i++) {
          if (i % 2 != 0) {
            ctx.fillStyle = "#f7fcfb";
            ctx.fillRect(0, list_bgtop_size, res.screenWidth, unit * 30);
          }
          list_bgtop_size = list_bgtop_size + unit * 30;
        }
        var list_top_size = unit * 164;
        for (let i = 0; i < space_len; i++) {
          let info = space_list[i];
          ctx.setFillStyle("#333")
          ctx.fillText(info['content'], unit * 30, list_top_size)
          ctx.fillText(info['content'], unit * 180, list_top_size)
          ctx.fillText(info['content'], unit * 284, list_top_size)
          ctx.setFillStyle("#63C0AC")
          ctx.fillText(info['content'], unit * 100, list_top_size)
          list_top_size = list_top_size + unit * 30;
        }
       
        //底部文案
        var footer_start = list_bgtop_size;
        ctx.drawImage(xcx_ewm, unit * 20,  footer_start + 20, unit * 70, unit * 70)
        ctx.setFontSize(unit * 14)
        ctx.setFillStyle("#999")
        ctx.fillText("微信扫一扫", unit * 96,  footer_start + unit * 45)
        ctx.fillText("看看我是谁", unit * 96, footer_start + unit * 70)
        ctx.setFontSize(unit * 22)
        ctx.setFillStyle("#63C0AC")
        ctx.fillText(aver_space, unit * 284,footer_start + unit * 45)
        
        //重置画布高度
        var canvas_totle_h = footer_start + 110;
        custem_space.canvas_h = canvas_totle_h+"px";
        that.setData({
          custem_space:custem_space
        });

       ctx.draw(false, function () {
       //一定要1秒钟之后，在调用canvasToTempFilePath()
        setTimeout(function () {
	        wx.canvasToTempFilePath({
	          x: 0,
	          y: 0,
	          width:  canvas_w,
	          height: canvas_totle_h,
	          //设置导出图片大小
	          destWidth: canvas_w * 2,
	          destHeight: canvas_totle_h * 2,
	          canvasId: 'space_img',
	          success: function (res) {
	            setTimeout(function () {
	              wx.saveImageToPhotosAlbum({
	                filePath: res.tempFilePath,
	                success: (res) => {
	                  wx.showToast({
	                    title: "保存相册成功"
	                  })
	                },
	                fail: (err) => {
	                  wx.showToast({
	                    title: "保存相册失败"
	                  })
	                }
	              })
	            },500)
	          },
	          fail: (err) => {
	           console.log('获取图片失败')
	          }
	        })
	   },1000)
    });
   }
})