微信小程序之画布，给图片添加圆角，画圆，文字换行（按照长度换行，按照/r/n换行水平居中）

一、画布，图片添加圆角

/**
 * 自定义函数roundRect
 * 画圆弧
 * ctx >> 画布
 *bg_x 图片的x坐标
 *bg_y 图片的y坐标
 *bg_w 图片宽度
 *bg_h 图片高度
 *bg_r 图片圆角
 *
 */
function roundRect(ctx, img, bg_x, bg_y, bg_w, bg_h, bg_r) {
  // 开始绘制
  ctx.save();
  ctx.beginPath();
  // var bg_x = 15;
  // // 图片的y坐标
  // var bg_y = 270;
  // // 图片宽度
  // var bg_w = 68;
  // // 图片高度
  // var bg_h = 92;
  // // 图片圆角
  // var bg_r = 5;
  ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
  ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
  ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
  ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
  ctx.clip();
  ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
  // 恢复之前保存的绘图上下文
  ctx.restore();
}
//使用：
util.roundRect(ctx, '图片路劲', 20, 20, 100, 135, 10);

二、画布，画圆

/**
 * 自定义函数roundRect_yuan
 * 画圆
 * ctx >> 画布
 *x圆的x坐标
 *y圆的y坐标
 *size 圆半径
 *
 */
function roundRect_yuan(ctx, x, y, size) {
  // 开始绘制
  // 圆形位置 大小
  // var x = 120;
  // var y = 130;
  // var size = 60;
  ctx.save(); // 保存
  ctx.beginPath(); // 开始绘制
  // ctx.arc(100, 75, 50, 0, 2 * Math.PI)
  ctx.arc(size / 2 + x, size / 2 + y, size / 2, 0, Math.PI * 2, false);
  ctx.clip();
  // 恢复之前保存的绘图上下文
  ctx.restore();
}
//使用：
util.roundRect_yuan(ctx, 100, 100, 70);

二、画布，文字换行
按照指定宽度换行

/**
 * canvas文本自动换行，注意调用前要设置字体，例如： ctx.font = '12px Arial'
 * @param {*} ctx CanvasRenderingContext2D
 * @param {*} text  文本
 * @param {*} x 
 * @param {*} y 
 * @param {*} lw 所占宽度
 * @param {*} lh 行高
 * return 绘制文本所需的高度
 */
const fillTextLineBreak = (ctx, text, x, y, lw, lh, color = '#000', font = '14') => {
  var i = 0;
  var n = 0;
  var r = -1;
  var initHeight = 0;
  ctx.font = "" + font + "px Arial"; //字体大小
  ctx.fillStyle = color; //字体颜色
  while (i < text.length) {
    while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
      i++
    }
    r++
    ctx.fillText(text.substring(n, i), x, y + lh * r)
    n = i
  }
  initHeight = lh * r;
  wx.setStorageSync('initHeight', initHeight);
}

//使用：
util.fillTextLineBreak(ctx,'文本内容', 20, 580, 322, 20); // 自动换行

按照换行符（/r/n）换行

/**
 * canvas文本自动换行，根据换行符换行，水平居中
 * text文本内容
 * x轴坐标
 * y轴坐标
 */
function fillTextLineBreakcount(ctx, text, x, y) {
  var initHeight = 0; //行高
  var textArray = text.split('\r\n');
  ctx.font = "normal 500 16px Arial"; //字体大小
  ctx.fillStyle = "#fff"; //字体颜色
  ctx.textAlign = "center";//文本居中
  for (let i = 0; i < textArray.length; i++) {
    ctx.fillText(textArray[i], x, y + initHeight)
    initHeight = initHeight + 20;
  }
}
//使用：util.fillTextLineBreakcount(ctx,'测试第一行\r\n测试第二行',当前画布宽度除以2, y轴坐标); // 自动换行