三角路径的弯曲边缘？

Question

我正在Canvas上画一个三角形，类似于：

canvas.moveTo(0, 30);
canvas.lineTo(40, 0);
canvas.lineTo(40, 40);
canvas.lineTo(40, 40);
canvas.lineTo(0, 30);

在我的画布上得到一个合适的三角形。但是我需要稍微弯曲边缘并填充特定颜色的路径。最简单的方法是什么？绘制弧线吗？但如何填充对象？

谢谢！

这是我需要得到的结果：https://istack.dev59.com/tRXa2.webp

- user584513

Answer 1

编辑：我注意到你使用的是安卓的画布，而不是HTML画布，抱歉。概念完全相同，只需调用quadTo()而不是quadraticCurveTo()，所以我的示例仍然可以帮助你。

在安卓上，您需要使用canvas.drawPath(path, paint)并传入一个其Paint.style设置为FILL_AND_STROKE的paint。

您需要构造路径，对其进行fill()，然后stroke()，以获得填充路径和描边轮廓。

要获得特定形状，最简单的方法是绘制两个二次曲线。二次曲线首先需要控制点x，y，然后是终点x，y。两条曲线的控制点应该在所需三角形的中间位置左右。这是一个示例：

ctx.fillStyle = "lightgray";

ctx.moveTo(0, 100);
ctx.quadraticCurveTo(50, 50, 50, 0);
ctx.quadraticCurveTo(50, 50, 100, 100);
ctx.lineTo(0, 100);
ctx.fill();
ctx.stroke();

点击此处查看该示例的实时演示。

- Simon Sarris

---

你能给我们提供一个公式吗？这对像我这样的人会很有帮助。 - Elangovan S