画布梯形形状上的圆角

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>