使用canvans创建自定义宽高和颜色的圆角矩形

generateBg(100, 25, 5, color)

function generateBg(w, h, borderRadius, color) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");

  // 设置矩形的宽度、高度和圆角半径
  var width = w;
  var height = h;
  var cornerRadius = borderRadius;
  // 调整Canvas的大小，留出足够的空间
  canvas.width = w;
  canvas.height = h;
  // 开始绘制路径
  ctx.beginPath();

  // 绘制圆角矩形
  ctx.moveTo(cornerRadius, 0);
  ctx.lineTo(width - cornerRadius, 0);
  ctx.arc(width - cornerRadius, cornerRadius, cornerRadius, Math.PI * 1.5, 0);
  ctx.lineTo(width, height - cornerRadius);
  ctx.arc(width - cornerRadius, height - cornerRadius, cornerRadius, 0, Math.PI * 0.5);
  ctx.lineTo(cornerRadius, height);
  ctx.arc(cornerRadius, height - cornerRadius, cornerRadius, Math.PI * 0.5, Math.PI);
  ctx.lineTo(0, cornerRadius);
  ctx.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 1.5);

  // 设置填充颜色
  ctx.fillStyle = color;
  ctx.fill();

  // 将Canvas转换为Base64
  var base64 = canvas.toDataURL();
  return base64
}