Canvas 有没有比较可靠的圆角多边形画法？

Question

想了一下圆角多边形大概是通过旁切圆计算去画，实现起来比较麻烦。有没有大佬有更可靠的方法？

Answer 1

今天看 Canvas API 发现其实用 arcTo() 就可以，尤其是当知道多半形顶点的时候就更容易了。一个简单的实现
CodePen DEMO

/**
 * 圆角多边形
 * @param {*} p 顶点数组 [[x1,y1],...]
 * @param {number} r 圆角半径
 * @param {} ctx
 */
function roundPolygonPath(p, r, ctx) {
  ctx.beginPath();
  const startPoint = [
    (p[0][0] + p[p.length - 1][0]) / 2,
    (p[0][1] + p[p.length - 1][1]) / 2,
  ];
  ctx.moveTo(...startPoint);
  for (let i = 0; i < p.length; i++) {
    if (i === p.length - 1) {
      ctx.arcTo(...p[p.length - 1], ...p[0], r);
    } else {
      ctx.arcTo(...p[i], ...p[i + 1], r);
    }
  }
  ctx.closePath();
}

Answer 2

如果不限定圆角、只要求平滑的话，可以用贝塞尔曲线。