在小程序常常会用到海报，这就需要canvas的一些常用方法，修饰文字，画图片圆角的封装方法，把它抽成canvas.js文件，方便以后用

　　在canvas.js   （笔记---canvas）

　　　　

/**
 * 文本换行
 * @param {Object} obj
 */
export const textWrap = function(obj){
  let tr = getTextLine(obj);
  for (let i = 0; i < tr.length; i++) {
    if (i < obj.line){
      let txt = {
        context: obj.context,
        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) {
        if (tr.length > obj.line) {
          txt.text = txt.text.substring(0, txt.text.length - 1) + '...';
        }
      }
      drawText(txt);
    }
  }
}
/**
 * 渲染文字
 *
 * @param {Object} obj
 */
var drawText = function (obj) {
  obj.context.save();
  obj.context.setFillStyle(obj.color);
  obj.context.setFontSize(obj.size);
  obj.context.setTextAlign(obj.align);
  obj.context.setTextBaseline(obj.baseline);
  if (obj.bold) {
    obj.context.fillText(obj.text, obj.x, obj.y - 0.5);
    obj.context.fillText(obj.text, obj.x - 0.5, obj.y);
  }
  obj.context.fillText(obj.text, obj.x, obj.y);
  if (obj.bold) {
    obj.context.fillText(obj.text, obj.x, obj.y + 0.5);
    obj.context.fillText(obj.text, obj.x + 0.5, obj.y);
  }
  obj.context.restore();
}
/**
 * 获取文本折行
 * @param {Object} obj
 * @return {Array} arrTr
 */
var getTextLine = function(obj){
  obj.context.setFontSize(obj.size);
  let arrText = obj.text.split('');
  console.log(arrText);
  let line = '';
  let arrTr = [];
  for (let i = 0; i < arrText.length; i++) {
    var testLine = line + arrText[i];
    var metrics = obj.context.measureText(testLine);
    var width = metrics.width;
    if ((width > obj.width && i > 0)||arrText[i]=='
') {  //
      arrTr.push(line);
      line = arrText[i]=='
'?arrText[i+1]:arrText[i];
    } else {
      line = testLine;
    }
    if (i == arrText.length - 1) {
      arrTr.push(line);
    }
  }
  return arrTr;
}

/**
 * 圆形头像
 */
export const circleImg = function(context, img, x, y, r){
  context.save();
  var d = 2 * r;
  var cx = x + r;
  var cy = y + r;
  context.beginPath();
  context.arc(cx, cy, r, 0, 2 * Math.PI);
  context.clip();
  context.drawImage(img, x, y, d, d);
  context.restore()
}