如何在HTML5画布上绘制二次曲线

最新推荐文章于 2023-08-18 22:20:23 发布

dingshi7798

最新推荐文章于 2023-08-18 22:20:23 发布

阅读量172

点赞数

文章标签： javascript ViewUI

在浏览器中绘制图形曲线从未如此简单。直到最近，如果需要平滑的图表，则必须在服务器上生成图像或创建SVG。动态创建曲线需要忍者JavaScript技能，数学学位和极大的耐心。

canvas元素已更改所有内容。现在，我们可以用几行代码绘制复杂的线条，曲线和形状并为其设置动画。今天，我们将看看二次曲线。

自从我上数学课以来已经很长时间了，所以请不要期望深入的解释！如果您有兴趣，请查看WolframMathWorld上的偏头痛诱发方程式……

回来了吗

像任何一条线一样，二次曲线具有起点（P ₀ ）和终点（P ₂ ）。然后，它具有确定线曲率的单个控制点（P ₁ ）。维基百科的这张图片提供了很好的曲线生成插图。

二次曲线非常适合绘制平滑的边缘。从该图像可以看到，很容易指定通常会出现平方边的控制点。

canvas元素支持二次曲线。首先，我们需要进行一些初始化以获取画布上下文并设置默认的线宽和颜色：


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

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


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

现在可以使用quadraticCurveTo（）方法绘制二次曲线。它包含四个参数：

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


ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();

为了达到这一目标，您做得很好，所以我创建了一个交互式画布二次曲线演示页面 （对不起，它在IE8及以下版本中不起作用） 。拖动控制点或直线的任意一端，它将为您生成代码。

在我的下一篇文章中，我们将使用贝塞尔曲线创建一些更有趣的形状……

关注