如何使用Canvas绘制爱心？

图形开发canvashtml5

在计算机图形学中，绘制曲线通常会用到一种叫做贝塞尔曲线的技术。贝塞尔曲线，也被称为贝兹曲线或贝济埃曲线，它是一种在二维图形程序中应用的数学曲线。

贝塞尔曲线是由线段和控制点组成的。这些控制点是可以拖动的支点，而线段就像是可以伸缩的皮筋。在绘图工具中，你可能会看到一种被称为钢笔的工具，它就是用来创建这种矢量曲线的。贝塞尔曲线可以分为二次贝塞尔曲线和三次贝塞尔曲线。二次贝塞尔曲线有一个控制点，而三次贝塞尔曲线则有两个控制点。

我们知道控制点如何影响贝塞尔曲线的形状。接下来，我们要探索一个更复杂的示例，这个示例将贝塞尔曲线与椭圆弧相结合，创造出广受欢迎的“爱心”形状。您将看到如下的运行效果：

示例效果与源代码：

运行效果

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>

<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,ladder,javascript,图形">
    <script src="/examples/canvas-qa/canvas_1a/js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="500" height="300" style="border:solid 1px #CCCCCC;"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');

    let minX = 50;
    let maxX = 450;
    let x = minX;
    let toLeft = false;

    function loopDraw() {
        if(x > maxX || x < minX) toLeft = ! toLeft;
        if(toLeft){
            x -= 2;
        } else {
            x += 2;
        }
        draw({ x: x, y: 20 }, { x: (maxX - x + 50), y: 280 })
    }

    window.requestAnimationFrame(loopDraw);

    function draw(ctrlPoint1, ctrlPoint2) {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格线
        drawGrid('lightgray', 10, 10);

        ctx.save();
        ctx.lineWidth = 4;

        ctx.beginPath();
        // 红色曲线
        ctx.moveTo(50, 150)
        ctx.quadraticCurveTo(ctrlPoint1.x, ctrlPoint1.y, 250, 150)
        ctx.strokeStyle = "red";
        ctx.stroke();

        // 蓝色曲线
        ctx.beginPath();
        ctx.moveTo(250, 150)
        ctx.quadraticCurveTo(ctrlPoint2.x, ctrlPoint2.y, 450, 150)
        ctx.strokeStyle = "blue";
        ctx.stroke();
        ctx.restore();

        // 辅助坐标点信息
        ctx.save();        
        ctx.beginPath();
        ctx.arc(50, 150, 8, 0, Math.PI * 2);
        ctx.moveTo(250, 150);
        ctx.arc(250, 150, 8, 0, Math.PI * 2);
        ctx.moveTo(450, 150);
        ctx.arc(450, 150, 8, 0, Math.PI * 2);
        ctx.fillStyle = "#5C35FF";
        ctx.fill();

        // 辅助控制点信息
        ctx.beginPath();
        ctx.arc(ctrlPoint1.x, ctrlPoint1.y, 8, 0, Math.PI * 2);
        ctx.moveTo(350, 280);
        ctx.arc(ctrlPoint2.x, ctrlPoint2.y, 8, 0, Math.PI * 2);
        ctx.fillStyle = "#A2A2A2";
        ctx.fill();

        // 辅助线信息
        ctx.beginPath();
        ctx.moveTo(50, 150);
        ctx.lineTo(ctrlPoint1.x, ctrlPoint1.y);
        ctx.lineTo(250, 150);
        ctx.lineTo(ctrlPoint2.x, ctrlPoint2.y);
        ctx.lineTo(450, 150);
        ctx.setLineDash([4, 4]);
        ctx.strokeStyle = "#A2A2A2";
        ctx.stroke();
        ctx.restore();

        // 动画
        window.requestAnimationFrame(loopDraw);
    }    
</script>

</html>

尝试一下 »

上一篇：如何实现橡皮擦Canvas来帮你？

下一篇：运动的小球Canvas特效代码