HTML5 Canvas – 绘制二次曲线

HTML5提供了Canvas API，它支持绘制简单的图形。

在本篇文章中，我们将使用Canvas API绘制二次曲线。

二次曲线的基本概念

在计算机图形学中，二次曲线指的是由第二次多项式描述的曲线。在图形中，它们通常用来描述平滑的路径或轮廓线。

二次曲线定义如下：

$Q(t) = (1-t)^2 P_0 + 2t(1-t)P_1 + t^2 P_2$

其中， $P_0$ 、 $P_1$ 和 $P_2$ 是曲线的控制点，t是参数。

二次曲线从 $P_0$ 开始，向 $P_2$ 走去，在 $P_1$ 处拐弯。

下面是一个绘制二次曲线的例子：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(75, 75, 100, 50);
ctx.stroke();

这段代码绘制了一个二次曲线，其控制点为 $(75, 75)$ ，拐点为 $(100, 50)$ 。

绘制二次曲线的步骤

要绘制一个二次曲线，我们需要熟悉一些Canvas API。

创建Canvas元素

HTML代码:

<canvas id="canvas" width="600" height="300"></canvas>

获取绘图上下文

JavaScript 代码:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

现在ctx就是我们的绘图上下文，我们可以使用它绘制图形。

绘制路径

使用 beginPath() 方法开始绘制路径，然后使用 moveTo() 方法指定路径的起点，使用 quadraticCurveTo() 方法绘制二次曲线。

在这个例子中，我们将路径的起点指定为 $(50,50)$ ，然后使用 quadraticCurveTo() 方法绘制二次曲线。它需要三个参数：拐点坐标和终点坐标。

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(75, 75, 100, 50);

绘制路径

使用 stroke() 方法绘制路径。

ctx.stroke();

绘制路径后，可以使用 fill() 方法填充路径。

ctx.stroke();
ctx.fill();

绘制多个二次曲线

在这个例子中，我们将绘制多个二次曲线。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.quadraticCurveTo(75,175, 100, 150);

ctx.moveTo(150, 150);
ctx.quadraticCurveTo(175, 125, 200, 150);

ctx.moveTo(250, 150);
ctx.quadraticCurveTo(275, 175, 300, 150);

ctx.stroke();

上述代码用三个二次曲线绘制了一个类似于山顶的图形。

自定义样式

要使绘制的二次曲线更好看，我们可以自定义其颜色、宽度和线条样式。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.quadraticCurveTo(75,175, 100, 150);

ctx.moveTo(150, 150);
ctx.quadraticCurveTo(175, 125, 200, 150);

ctx.moveTo(250, 150);
ctx.quadraticCurveTo(275, 175, 300, 150);

ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();

上述代码中，我们使用了strokeStyle属性设定了绘制图形的线条颜色，通过lineWidth属性设定了线条的宽度，而lineCap属性则设定线条端点的样式，lineJoin` 属性用于设定线条拐角的样式。

这样自定义过的二次曲线看起来更加美观。