帆布梯形上的圆角

Question

我正在尝试使用画布绘制一个形状，并且与我想要的非常接近。只是圆角有点难以达到我的需要。

我有以下代码

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");

// Set rectangle and corner values
var cornerRadius = 5;

// Set faux rounded corners
context.lineJoin = "round";
context.lineWidth = 50;

context.beginPath();
context.moveTo(400, 60);
context.lineTo(360, 140);
context.lineTo(240, 135);
context.lineTo(180, 60);
context.closePath();
context.stroke();
context.fill();

这导致了这里的形状

我想要实现的是让左右底角都变圆，而不是顶部。

如果我删除 lineJoin，那么圆角就消失了。

那么，我该如何设置 lineJoin 应该运行的点？

非常感谢。

Answer 1

使用quadraticCurveTo 进行检查，这就是我在此示例中使用的内容。不幸的是，您无法更改连接类型的中间形状，但是您可以实际绘制圆形路径。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = canvas.height = 800;

// Set rectangle and corner values
const cornerRadius = 1;

ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(180, 60);
ctx.lineTo(400, 60);
ctx.quadraticCurveTo(400, 60, 400, 60);
ctx.lineTo(360, 140 - cornerRadius);
ctx.quadraticCurveTo(360, 140, 360 - cornerRadius, 140);
ctx.lineTo(240 + cornerRadius, 135);
ctx.quadraticCurveTo(240, 135, 240, 135 - cornerRadius);
ctx.lineTo(180, 60);
ctx.closePath();
ctx.stroke();
ctx.fill();

<canvas></canvas>