36

我最近一直在玩画布，并使用与这些曲线相关的方法绘制了几种形状（泪滴、花瓣、云、岩石）。话虽如此，我似乎无法弄清楚这些不同曲线的用例之间的区别。

我知道三次贝塞尔曲线有 2 个控制点、一个起点和一个端点，而二次贝塞尔曲线有一个控制点、一个起点和一个终点。但是，在绘制形状时，我似乎无法轻易决定使用哪一个或何时结合使用它们。

我如何知道在绘制形状的不同点使用哪种类型的曲线？

4

2 回答 2

75

正如您所发现的，二次曲线和三次贝塞尔曲线都只是将 2 个点与一条曲线连接起来。

由于三次曲线具有更多控制点，因此在这两个点之间的路径更加灵活。

例如，假设您要绘制这个字母“R”：

在此处输入图像描述

从 R 的“非曲线”部分开始绘制：

在此处输入图像描述

现在尝试用二次曲线绘制曲线。

请注意，二次曲线比我们想要的更“尖”。

那是因为我们只有 1 个控制点来定义二次曲线。

在此处输入图像描述

现在尝试用三次贝塞尔曲线绘制曲线。

三次贝塞尔曲线比二次曲线更圆润。

那是因为我们有 2 个控制点来定义三次曲线。

在此处输入图像描述

所以......更多的控制点可以更好地控制“曲线”

这是代码和小提琴：http: //jsfiddle.net/m1erickson/JpXZW/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=8;
    ctx.lineCap="round";

    function baseR(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(30,200);
        ctx.lineTo(30,50);
        ctx.lineTo(65,50);
        ctx.moveTo(30,120);
        ctx.lineTo(65,120);
        ctx.lineTo(100,200);
        ctx.strokeStyle="black";
        ctx.stroke()
    }

    function quadR(){
        ctx.beginPath();
        ctx.moveTo(65,50);
        ctx.quadraticCurveTo(130,85,65,120);
        ctx.strokeStyle="red";
        ctx.stroke();
    }

    function cubicR(){
        ctx.beginPath();
        ctx.moveTo(65,50);
        ctx.bezierCurveTo(120,50,120,120,65,120);
        ctx.strokeStyle="red";
        ctx.stroke();
    }

    $("#quad").click(function(){
        baseR();
        quadR();
        //cubicR();
    });

    $("#cubic").click(function(){
        baseR();
        cubicR();
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="quad">Use Quadratic curve</button>
    <button id="cubic">Use Cubic Bezier curve</button><br><br>
    <canvas id="canvas" width=150 height=225></canvas>
</body>
</html>
于 2013-09-15T17:35:21.463 回答
16

我知道这篇文章有点晚了。但似乎仍然缺少关于二次和三次贝塞尔曲线的一些重要方面。所以....

使用二次贝塞尔曲线，您将永远无法使两端斜率平行。但是你可以用三次贝塞尔曲线来实现。此外，三次贝塞尔曲线允许您单独控制两个端部斜率，这对于二次贝塞尔曲线也是不可能的。但是，二次贝塞尔曲线永远不会有拐点（曲率符号发生变化的点），而三次贝塞尔曲线可能有拐点，如果您不小心控制点。因此，总而言之，三次贝塞尔曲线比二次贝塞尔曲线更受欢迎，因为它具有灵活性。当单调曲率很重要时，将使用二次贝塞尔曲线（更常见的是有理二次贝塞尔曲线）。

于 2014-09-09T06:36:35.067 回答