Canvas实现连续平滑的曲线

图形开发canvashtml5

要在Canvas上绘制连续平滑的曲线，通常我们会使用quadraticCurveTo()（二次贝塞尔曲线）或bezierCurveTo()（三次贝塞尔曲线）方法。但如果你想要绘制一条通过多个点的连续平滑曲线，你可能需要使用一种称为“样条曲线”或“插值曲线”的技术。在Canvas API中没有直接支持样条曲线的方法，但你可以通过一系列的二次或三次贝塞尔曲线来近似实现。

下面是一个使用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
42
43
44
45
46
47
48
49
50
51
52
53
<!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 {  
            border: 1px solid black;  
        }  
    </style>  
</head>  
<body>  
  
<canvas id="myCanvas" width="740" height="400"></canvas>  
  
<script>  
    // 获取canvas元素和绘图上下文  
    var canvas = document.getElementById('myCanvas');  
    var ctx = canvas.getContext('2d');  
  
    ctx.lineWidth = 4;
    
    // 绘制三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(30, 300);
    ctx.bezierCurveTo(90, 300, 80, 50, 160, 50);
    ctx.strokeStyle = "red";
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(160, 50);
    ctx.bezierCurveTo(230, 50, 220, 300, 280, 300);
    ctx.strokeStyle = "blue";
    ctx.stroke();

    // 绘制辅助三次贝塞尔曲线
    ctx.translate(400, 0);
    ctx.beginPath();
    ctx.moveTo(30, 300);
    ctx.bezierCurveTo(90, 300, 80, 50, 160, 50);
    ctx.strokeStyle = "red";
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(160, 50);
    ctx.bezierCurveTo(230, 50, 220, 300, 280, 300);
    ctx.strokeStyle = "blue";
    ctx.stroke();
</script>  
  
</body>  
</html>

在这个示例中，我们定义了一个points数组，其中包含要通过的点的坐标。然后，我们使用drawSmoothCurve函数来绘制曲线。该函数使用quadraticCurveTo方法来连接每个点，并通过计算控制点来使曲线更平滑。注意，这只是一个简化的示例，控制点是通过取相邻点的中点来计算的。如果你想要更精确的平滑曲线，你可能需要使用更复杂的算法（如Catmull-Rom样条曲线）来计算控制点。

请注意，Canvas API本身并不直接支持通过多个点绘制平滑曲线的方法，因此这种方法是一种近似实现。

上一篇：在HTML中怎么绘制出表情符号？

下一篇：HTML 块和内联元素的区别？