Canvas备忘

Canvas备完：
1、canvas中使用得大小和位置都是以px为单位的，所以适配的时候需要进行转换
2、canvas中好用的文字换行函数

//param_ctx  代表canvas对象  param_str文字内容  param_x横坐标  param_y纵坐标  param_height行高 param_maxlen最大长度
//本函数取自网络   超过两行部分显示...
//文字大小使用param_ctx.setFontSize(10)进行设置
myDrawText: function (param_ctx, param_str, param_x, param_y, param_hieght, param_maxlen) {
    let chr = param_str.split("")
    let temp = "";
    let row = [];
    for (let a = 0; a < chr.length; a++) {
      if (param_ctx.measureText(temp).width < param_maxlen) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);
    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      let rowCut = row.slice(0, 2);
      let rowPart = rowCut[1];
      let test = "";
      let empty = [];
      for (let a = 0; a < rowPart.length; a++) {
        if (param_ctx.measureText(test).width < param_maxlen) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      let group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    for (let b = 0; b < row.length; b++) {
      param_ctx.fillText(row[b], param_x, param_y + param_hieght * b, param_maxlen);
    }
  },

3、canvas绘制网络图时需要提前将网络图下载到本地再进行绘制，不然在手机上绘制将会失败。本人通常是使用wx.getImageInfo()函数进行获取，由于函数是异步进行的，所以有多张图片最好都先提前下载好再进行绘制。关于这个函数需要注意的是，设置的src路径如果是网络路径一定要在微信公众平台上提前将域名加入到安全域名，不然会下载失败，在开发时最好开启合法域名校验，方便问题的查找。
4、canvas其他常用函数参考https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html