Canvas 梯形上的圓角

Question

我正在嘗試使用 canvas 繪制一個形狀，我與我想要的非常接近。 只是圓角有點難以達到我的需要。

我有以下代碼

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>