javascript - 没有线连接和笔划宽度的画布三角形

Question

我有一个圆角的三角形，但我正在使用arcTo：

context.moveTo(140, 0);
context.arcTo(180, 100, 100, 100, 4);
context.arcTo(100, 100, 140, 0, 4);
context.arcTo(140, 0, 180, 100, 4);

如您所见，顶角看起来有点乱。任何想法如何解决它？似乎需要对初始值进行一些计算，moveTo(x, y)但140, 0它应该从哪里开始。

Answer 1

我刚刚摆脱了moveTo它们并将它们相互连接起来。第一部分从 174 开始，176（180-4 半径）工作，但 174 根本没有重叠。

现场演示

​var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 400;

ctx.beginPath();
ctx.arcTo(174, 100, 100, 100, 4);
ctx.arcTo(100, 100, 140, 0, 4);
ctx.arcTo(140, 0, 180, 100, 4);
ctx.arcTo(180, 100, 100, 100, 4);
ctx.stroke();
​

Answer 2

这是我想出的：

var r = 8;
var offset = (6 * r / 4) - 1;

context.arcTo((180 - offset), 100, 100, 100, r);
context.arcTo(100, 100, 140, 0, r);
context.arcTo(140, 0, 180, 100, r);
context.arcTo(180, 100, 100, 100, r);

使用 Loktar 提供的部分内容，我对其稍作修改，以使用我所知道的适用于给定直径的比率，并将其用作偏移量。直径为 4，我知道 6 个作品。

似乎应该有更好的方法，但我对此很满意。