html - 如何在 Canvas 中制作药丸形状？ (基本上是圆角矩形)

Question

玩一个突破性的克隆，想制作圆角 Prop 。

有人能指出我正确的方向吗？

谢谢!

Answer 1

一个简单的方法是使用quadraticCurveTo来平滑角

let roundRect = (ctx, x0, y0, x1, y1, r, color) => {
      var w = x1 - x0;
      var h = y1 - y0;
      if (r > w/2) r = w/2;
      if (r > h/2) r = h/2;
      ctx.beginPath();
      ctx.moveTo(x1 - r, y0);
      ctx.quadraticCurveTo(x1, y0, x1, y0 + r);
      ctx.lineTo(x1, y1-r);
      ctx.quadraticCurveTo(x1, y1, x1 - r, y1);
      ctx.lineTo(x0 + r, y1);
      ctx.quadraticCurveTo(x0, y1, x0, y1 - r);
      ctx.lineTo(x0, y0 + r);
      ctx.quadraticCurveTo(x0, y0, x0 + r, y0);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
  },
  ctx = document.getElementById("canvas").getContext("2d");
  
roundRect(ctx, 50, 50, 150, 100, 5, "#F00");
roundRect(ctx, 50, 110, 100, 160, 10, "#00F");
roundRect(ctx, 53, 113, 97, 157, 7, "#0F0");

<canvas id="canvas" width="200" height="180"></canvas>