canvas常用方法封装

我是进行的uniapp开发所以里边有部分uniAPI 不需要的小伙伴可根据需求自行调整代码

/**
 * 绘制圆角矩形
 * @exports
 * @param { Object } ctx ctx - canvas组件的绘图上下文
 * @param { Number } x x - 矩形的x坐标
 * @param { Number } y y - 矩形的y坐标
 * @param { Number } w w - 矩形的宽度
 * @param { Number } h h - 矩形的高度
 * @param { Number } r r - 矩形的圆角半径
 * @param { String } c [c = 'transparent'] - 矩形的填充色
 */
export function roundRect (ctx, x, y, w, h, r, c = '#fff') {
  if (w < 2 * r) { r = w / 2; }
  if (h < 2 * r) { r = h / 2; }

  ctx.beginPath();
  ctx.fillStyle = c;

  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.lineTo(x + w, y + r);

  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
  ctx.lineTo(x + w, y + h - r);
  ctx.lineTo(x + w - r, y + h);

  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
  ctx.lineTo(x + r, y + h);
  ctx.lineTo(x, y + h - r);

  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
  ctx.lineTo(x, y + r);
  ctx.lineTo(x + r, y);

  ctx.fill();
  ctx.closePath();
}

/**
 * 绘制文字并上色
 * @exports
 * @param { Object } ctx ctx - canvas组件的绘图上下文
 * @param { Number } text 所需要绘制的文字
 * @param { Number } font 文字字体
 * @param { Number } color 文字颜色
 * @param { Number } left 文字左侧距离
 * @param { Number } right 文字顶部距离
 * @param { Number } fontSize 字体大小
 */
export function setFont (ctx, text, font, color, left, top, fontSize) {
  ctx.font = font;
  ctx.setFillStyle(color);
  typeof fontSize === 'number' && ctx.setFontSize(fontSize);
  ctx.fillText(text, left, top);
}

/**
 * 绘制圆形图片
 * @exports
 * @param {*} ctx Canvas实例
 * @param {*} src 图片地址
 * @param {*} x x轴坐标
 * @param {*} y y轴坐标
 * @param {*} r 圆形半径
 * @description 如果在绘制图片之后还有需要绘制别的元素，需启动 save() 、restore() 方法，否则 clip() 方法会导致之后元素都不可见
 */
export function createCircleImg (ctx, img, x, y) {
  uni.getImageInfo({
    src: img,
    success: ({ width, height }) => {
      ctx.save();
      let radius, diameter;
      radius = width > height ? height / 2 : width / 2;
      diameter = radius * 2;
      ctx.clearRect(0, 0, diameter, diameter);
      ctx.save();
      ctx.beginPath();
      ctx.arc(radius, radius, radius, 0, Math.PI * 2, false);
      ctx.clip();
      ctx.drawImage(img, 0, 0, diameter, diameter, 0, 0, diameter, diameter);
      ctx.draw();
    }
  });
}
/**
 * 绘制矩形
 * @exports
 * @param {*} ctx Canvas实例
 * @param {*} w 宽度
 * @param {*} h 高度
 * @param {*} x x坐标
 * @param {*} y y坐标
 * @param {*} color 背景颜色
 */
export function drawRect (ctx, w, h, x, y, color) {
  ctx.setFillStyle(color);
  ctx.fillRect(x, y, w, h);
}