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

二次贝塞尔曲线由线段和一个控制点组成,其中控制点是可以拖动的支点,而线段则如同可伸缩的皮筋,可以拉伸和收缩,线段和控制点的位置均会影响到曲线的形状;例如将控制点的位置固定,线段的位置不断向左或向右移动,曲线弯曲程度和形状会随之变化。又如,线段的位置固定,控制点的位置不断向左或向右移动,曲线弯曲程度和形状也会随之变化。可见线段和控制点位置的变换对曲线的影响。
在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方法对爱心描边,将爱心绘制在画布上。