在Canvas画布上如何利用二次贝塞尔曲线绘制爱心图？

图形开发canvashtml5

二次贝塞尔曲线由线段和一个控制点组成，其中控制点是可以拖动的支点，而线段则如同可伸缩的皮筋，可以拉伸和收缩，线段和控制点的位置均会影响到曲线的形状；例如将控制点的位置固定，线段的位置不断向左或向右移动，曲线弯曲程度和形状会随之变化。又如，线段的位置固定，控制点的位置不断向左或向右移动，曲线弯曲程度和形状也会随之变化。可见线段和控制点位置的变换对曲线的影响。
在Canvas画布上绘制爱心图，可以通过使用二次贝塞尔曲线（quadraticCurveTo()方法）来实现。下面是一个完整的HTML文件示例，展示了如何利用JavaScript在Canvas上绘制一个爱心图。

示例效果与源代码：

运行效果

以下是一个HTML文件示例，展示了如何在Canvas画布上绘制一条三次贝塞尔曲线：

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
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>绘制曲线和路径(quadraticCurveTo)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript,图形">
    <script src="../js/helper.js"></script>
</head>

<body style="margin:10px;">
    <canvas id="canvas" width="540" height="400"
        style="border:solid 1px #CCCCCC; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格线
    //drawGrid('lightgray', 10, 10);

    // 绘制爱心
    ctx.beginPath();
    ctx.moveTo(115, 121)
    ctx.ellipse(189, 121, 74, 74, 0, Math.PI, 2 * Math.PI, false)
    ctx.ellipse(337, 121, 74, 74, 0, Math.PI, 2 * Math.PI, false)
    ctx.quadraticCurveTo(411, 232, 263, 343)
    ctx.quadraticCurveTo(115, 232, 115, 121)
    ctx.closePath()

    // 描边
    ctx.lineWidth = 4;
    ctx.strokeStyle = "red";
    ctx.stroke();
</script>

</html>

尝试一下 »

在这个示例中，首先，使用beginPath方法开始一个新的路径，并使用moveTo方法将画笔移动到爱心的起点。然后，可以利用之前学习的ellipse方法绘制两个椭圆作为爱心的基本形状。接着，使用quadraticCurveTo方法绘制两个连续的曲线段，形成完整的爱心形状。接着使用strokeStyle设置爱心的颜色，最后使用stroke方法对爱心描边，将爱心绘制在画布上。

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

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