如何在HTML5画布上绘制贝塞尔曲线

在上一篇文章中，我们使用几行代码在HTML5 canvas元素上创建了二次曲线 。 如果在二次曲线演示页面上检查过JavaScript，您可能已经注意到béziers的一些引用-贝塞尔曲线的近亲。

贝塞尔曲线是什么？

您可能已经看到在桌面发布和图形包中使用的贝塞尔曲线。 因此，让我们再次去WolframMathWorld看看方程。

我确定您了解这一点，但我感到有些恶心。

在上一篇文章中 ，我们看到了二次曲线如何具有确定曲率的起点（P ₀ ），终点（P ₂ ）和单个控制点（P ₁ ）。 在画布的情况下，贝塞尔曲线具有起点（P ₀ ），终点（P ₃ ）和两个控制点-线的每一端一个（P ₁和P ₂ ）。 再次感谢维基百科的精彩插图。

贝塞尔曲线可以更好地控制形状。 由于曲线的初始部分遵循其控制路径，因此我们可以生成反向或自动缠绕的曲线。 它们是创建类似Visio的流程图的理想选择，您需要通过连接器将两个形状连接起来。

上代码！

像以前一样，我们需要使用几行JavaScript来获取画布上下文并设置默认的宽度和颜色：

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";

现在，我们定义曲线的起点（P ₀ ）：

ctx.beginPath();
ctx.moveTo(100, 250);

然后使用bezierCurveTo（）方法绘制曲线。 它需要六个参数：

• 曲线起点控制点（P ₁ ）的x坐标
• 曲线起点控制点（P ₁ ）的y坐标
• 曲线终点控制点（P ₂ ）的x坐标
• 曲线终点控制点（P ₂ ）的y坐标
• 终点的x坐标（P ₃ ）
• 终点的y坐标（P ₃ ）

最后，我们调用stroke（）方法完成曲线：

ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();

交互式的画布贝塞尔曲线演示页面使您能够拖动所有点并生成代码（对不起IE迷-您需要等待IE9） 。

希望您觉得本系列有用。 您是否将画布曲线用于任何有趣的项目？

From: https://www.sitepoint.com/html5-canvas-draw-bezier-curves/