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完全没有重叠。

<强> Live Demo

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件作品。

似乎应该有一个更好的方法，但我很高兴。

没有linejoin和笔画宽度的画布三角形

2 个答案: