canvas绘制

绘制canvas常使用的一些方法：

a.计算文字的长度

/**
*  canvas 计算文字长度
* @param text: 文本
*/
const textWH = (context, text) => {
  return context.measureText(`${text}`).width
}

b.文字溢出处理或者换行显示

/**
*  canvas 绘制的文字换行
* @param t:文本，x：x起始位置，y:y起始位置，w：宽度，line：显示多少行，不传时，全部显示
*/
const drawText = (context, t, x, y, w, line = 1) => {
  if (!t.length) {
    return;
  }
  let chr = t.split('');
  let temp = '';
  let row = [];
  for (let a = 0; a < chr.length; a++) {
    if (context.measureText(temp).width >= w) {
      row.push(temp);
      temp = '';
    }
    temp += chr[a];
  }
  row.push(temp);
  let _line = (line > 0 && line < row.length) ? line : row.length;
  for (let b = 0; b < _line; b++) {
    if (b == (_line - 1) && row.length > _line) {
      row[b] = row[b].substr(0, row[b].length - 1) + '...';
    }
    context.fillText(row[b], x, y + (b + 1) * 10);
  }
}

c.圆角边框

/**
*  canvas 圆角边框
* @param 
rect：{x起始位置，y:y起始位置, width:矩形的宽度,height：矩形的高度},
r:圆角的弧度,
color: {strokeStyle: 边框颜色, fillStyle: 填充颜色}
*/
 
const Point = (x, y) => {
  return {
    x, y
  }
}
const Rect = (x, y, width, height) => {
  return {
    x, y, width, height
  }
}
const raduisbox = (ctx, rect = {}, r, color = {}) => {
// 阴影
ctx.shadowBlur = unit(8);
ctx.shadowColor = "#adadad4d";

  let ptA = Point(rect.x + r, rect.y),
    ptB = Point(rect.x + rect.width, rect.y),
    ptC = Point(rect.x + rect.width, rect.y + rect.height),
    ptD = Point(rect.x, rect.y + rect.height),
    ptE = Point(rect.x, rect.y);

  ctx.beginPath();
  ctx.moveTo(ptA.x, ptA.y); //创建一个起点
  ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);   //右上角圆弧
  ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);   //右下角圆弧
  ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);   //左下角圆弧
  ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);   //左上角圆弧
  ctx.strokeStyle = color.strokeStyle || '#F9F9F9';   //边框颜色 
  ctx.fillStyle = color.fillStyle || '#F9F9F9';    //填充颜色

  ctx.fill()
  ctx.stroke();
}

d.绘制圆形图片

/**
*  canvas 计算文字长度
* @param img: 图片路径,x:起始X位置, y:起始y位置,w:图片显示宽度
*/
const roundImg = (ctx, img, x, y, w) => {
  let r = w / 2;
  let d = 2 * r, cx = x + r, cy = y + r;
  ctx.save();
  ctx.beginPath();
  // 圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
  ctx.arc(cx, cy, r, 0, 2 * Math.PI);
  ctx.clip();
  ctx.drawImage(img, x, y, d, d);
  ctx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下即状态 还可以继续绘制
}

e.倒三角

/**
*  canvas 倒三角向下
* @param x:起始X位置, y:起始y位置,w:宽度,h:高度,color:颜色
*/
const triangle_down = (ctx, x, y, w, h, color) => {
  ctx.strokeStyle = color || "#D2D2D2";
  ctx.fillStyle = color || "#D2D2D2";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + (w / 2), y + h);
  ctx.lineTo(x + w, y);
  ctx.fill();
  ctx.stroke();
}
/**
*  canvas 倒三角向上
*/
const triangle_up = (ctx, x, y, w, h, color) => {
  ctx.strokeStyle = color || "#D2D2D2";
  ctx.fillStyle = color || "#D2D2D2";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + w, y);
  ctx.lineTo(x + (w/2), y - ((h / 2)));
  ctx.fill();
  ctx.stroke();
}
/**
*  canvas 倒三角向右
*/
const triangle_right = (ctx, x, y, w, h, color) => {
  ctx.strokeStyle = color || "#D2D2D2";
  ctx.fillStyle = color || "#D2D2D2";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y-h);
  ctx.lineTo(x + (w/2), y - ((h / 2)));
  ctx.fill();
  ctx.stroke();
}
/**
*  canvas 倒三角向左
*/
const triangle_left = (ctx, x, y, w, h, color) => {
  ctx.strokeStyle = color || "#D2D2D2";
  ctx.fillStyle = color || "#D2D2D2";
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y-h);
  ctx.lineTo(x - (w/2), y - ((h / 2)));
  ctx.fill();
  ctx.stroke();
}