在Canvas画布上如何绘制出三次贝塞尔曲线？

图形开发canvashtml5

Canvas提供了bezierCurveTo()方法可直接绘制三次贝塞尔曲线。该方法主要参数是两个控制点xy坐标和终止点xy坐标。与二次贝塞尔曲线一样，三次贝塞尔曲线也是在路径中进行绘制，其参数也没有包括起点坐标。接下来，我将讲解三次贝塞尔曲线的绘制过程，首先使用beginPath()方法开始路径，使用moveTo()方法将画笔移到三次贝塞尔曲线的起点，然后使用bezierCurveTo()方法绘制三次贝塞尔曲线，接着使用strokeStyle()设置三次贝塞尔曲线颜色，最后使用stroke方法对三次贝塞尔曲线进行描边，将三次贝塞尔曲线绘制在画布上。如此，我们就完成了三次贝塞尔曲线的绘制。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 三次贝塞尔曲线示例</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            // 设置起始点
            ctx.beginPath();
            ctx.moveTo(50, 400); // 起点

            // 绘制三次贝塞尔曲线
            ctx.bezierCurveTo(
                150, 100, // 第一个控制点
                350, 100, // 第二个控制点
                450, 400  // 终点
            );

            // 设置线条样式
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'blue';
            ctx.stroke(); // 描边

            // 可选：填充曲线（如果需要闭合路径并填充）
            // ctx.lineTo(50, 400); // 闭合路径（如果不需要闭合，则不添加此行）
            // ctx.closePath(); // 闭合路径（如果不需要闭合，则不添加此行）
            // ctx.fillStyle = 'lightblue';
            // ctx.fill(); // 填充（如果不需要填充，则不添加此行）
        };
    </script>
</body>
</html>

尝试一下 »

解释：

  1. HTML结构：

    • 一个<canvas>元素用于绘制图形，id为canvas，宽度和高度均设为500。

  2. CSS样式：

    • 将<canvas>元素居中显示，并添加了一个黑色边框以便于观察。

  3. JavaScript代码：

    • 在window.onload事件中，获取Canvas上下文ctx。
    • 使用ctx.moveTo(50, 400)设置起始点。
    • 使用ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，其中(cp1x, cp1y)是第一个控制点的坐标，(cp2x, cp2y)是第二个控制点的坐标，(x, y)是终点的坐标。
    • 设置线条样式，包括线条宽度ctx.lineWidth和线条颜色ctx.strokeStyle，然后使用ctx.stroke()方法描边。
    • 如果需要填充曲线，可以添加闭合路径的代码（ctx.lineTo(50, 400)和ctx.closePath()），并设置填充样式ctx.fillStyle和调用ctx.fill()方法。在这个示例中，填充部分是可选的。

运行这个HTML文件，你将看到一条从左上角到右下角的蓝色三次贝塞尔曲线绘制在Canvas画布上。这条曲线通过两个指定的控制点来定义其形状。

上一篇：在Canvas画布上如何利用三次贝塞尔曲线绘制出连续的曲线？

下一篇：三次贝塞尔曲线的特征有哪些？