微信小程序之画布，给图片添加圆角，画圆，文字换行

一、画布，图片添加圆角

/**
 * 自定义函数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.setStrokeStyle('#F1F1F6');//边框色
  ctx.stroke(); //画出当前路径的边框  
  ctx.setFillStyle('#F1F1F6');//填充色
  ctx.fill(); //对当前路径中的内容进行填充
  ctx.clip();
  // 恢复之前保存的绘图上下文
  ctx.restore();
}
//使用：
util.roundRect_yuan(ctx, 100, 100, 70);

二、画布，文字换行

/**
 * 自定义函数drawText
 * 文字换行
 * ctx >> 画布
 *str文字
 *leftWidth >> y坐标
 *initHeight >> x坐标
 *canvasWidth当前文字所占宽度
 */
function drawText(ctx, str, leftWidth, initHeight, canvasWidth) {
  var lineWidth = 0;
  var lastSubStrIndex = 0; // 每次开始截取的字符串的索引
  ctx.font = "14px Arial"; //字体大小
  ctx.fillStyle = "#000"; //字体颜色
  for (let i = 0; i < str.length; i++) {
    lineWidth += ctx.measureText(str[i]).width;
    if (lineWidth > canvasWidth) {
      ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); // 绘制截取部分
      initHeight += 20; // 24为字体的高度
      lineWidth = 0;
      lastSubStrIndex = i;
    }
    if (i == str.length - 1) { // 绘制剩余部分
      ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
    }
  }
  //initHeight >> 文字所占的y坐标
  //wx.setStorageSync('initHeight', initHeight);
}

//使用：
util.drawText(ctx, '文字内容', 20, 580, 320); // 自动换行

标签：圆角,bg,微信,ctx,initHeight,画圆,var,PI,Math
来源： https://blog.csdn.net/weixin_44936767/article/details/116657591