经典重现，技术美学再启征程：canvas第二回曲线之美

2023-11-19 22:46:47

曲线之美

曲线在自然界无处不在，从优美的海岸线到起伏的山峦，从绚丽的彩虹到飘逸的绸带，曲线以其柔美、灵动和细腻的形态，给人以无限的遐想和审美愉悦。

在计算机图形学中，曲线也扮演着重要的角色。它不仅可以用来绘制各种形状，还可以用来表示运动轨迹、光影效果等。掌握曲线绘制技巧，对于提升图形编程能力至关重要。

canvas绘制曲线

canvas提供了多种方法来绘制曲线，其中最常用的是moveTo()和lineTo()方法。moveTo()方法将画笔移动到指定坐标，而lineTo()方法将画笔从当前位置绘制一条直线到指定坐标。通过组合使用这两个方法，可以绘制出各种各样的曲线。

除了moveTo()和lineTo()方法之外，canvas还提供了quadraticCurveTo()和bezierCurveTo()方法来绘制更复杂的曲线。quadraticCurveTo()方法使用一个控制点来绘制二次贝塞尔曲线，而bezierCurveTo()方法使用三个控制点来绘制三次贝塞尔曲线。

实例：绘制正弦曲线

为了更好地理解如何使用canvas绘制曲线，我们来看一个简单的例子：绘制正弦曲线。

// 创建canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 500;
canvas.height = 300;

// 设置画笔颜色
ctx.strokeStyle = 'blue';

// 设置画笔宽度
ctx.lineWidth = 2;

// 设置画笔起点
ctx.moveTo(0, 150);

// 绘制正弦曲线
for (var i = 0; i < 500; i++) {
  var x = i;
  var y = 150 + 50 * Math.sin(i * Math.PI / 180);
  ctx.lineTo(x, y);
}

// 绘制完成
ctx.stroke();