玩一个突破性的克隆,想制作圆角 Prop 。
有人能指出我正确的方向吗?
谢谢!
最佳答案
一个简单的方法是使用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>
关于html - 如何在 Canvas 中制作药丸形状? (基本上是圆角矩形),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9693144/