Canvas 入门指南：绘制动态贝塞尔曲线

2023-10-14 23:40:28

在 HTML5 中，<canvas> 元素提供了一个可以通过 JavaScript 进行绘制的画布。与 SVG 相比，<canvas> 使用像素绘制图形，这使得它非常适合创建复杂的动画和视觉效果。然而，要使用 <canvas> 绘制贝塞尔曲线，我们需要了解其背后的原理和技巧。

Canvas 简介

<canvas> 是 HTML5 中的一个元素，它允许你使用 JavaScript 在网页上绘制图形。与 SVG 不同，canvas 使用像素来绘制图形，这意味着你可以创建更逼真的动画和效果。

贝塞尔曲线简介

贝塞尔曲线是一种光滑的曲线，它由多个控制点定义。贝塞尔曲线通常用于创建复杂的形状和动画。

Canvas 中的贝塞尔曲线

在 canvas 中，你可以使用 CanvasRenderingContext2D.quadraticCurveTo() 和 CanvasRenderingContext2D.bezierCurveTo() 方法来绘制贝塞尔曲线。

quadraticCurveTo()

quadraticCurveTo() 方法绘制二次贝塞尔曲线，它由两个控制点定义。

bezierCurveTo()

bezierCurveTo() 方法绘制三次贝塞尔曲线，它由三个控制点定义。

贝塞尔曲线动画

通过改变贝塞尔曲线的控制点，你可以创建动画。例如，你可以让一个圆沿路径移动，或者让一个形状随着时间的推移而改变形状。

使用 canvas 绘制贝塞尔曲线动画的步骤

创建一个 canvas 元素。
获取 canvas 的上下文。
使用 quadraticCurveTo() 或 bezierCurveTo() 方法绘制贝塞尔曲线。
使用 requestAnimationFrame() 方法启动动画循环。
在动画循环中，更新贝塞尔曲线的控制点。
使用 clearRect() 方法清除 canvas 上的图形。
使用 beginPath() 方法开始一个新的路径。
使用 moveTo() 方法将路径移动到贝塞尔曲线的起点。
使用 quadraticCurveTo() 或 bezierCurveTo() 方法绘制贝塞尔曲线。
使用 stroke() 或 fill() 方法填充或描边贝塞尔曲线。

示例：绘制一个沿着路径移动的圆

下面是一个简单的示例，展示了如何使用 <canvas> 绘制一个沿着路径移动的圆。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Canvas 动态贝塞尔曲线</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>

<canvas id="canvas" width="500" height="500"></canvas>

<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var x = 100;
var y = 100;

var controlPoint1X = 200;
var controlPoint1Y = 200;

var controlPoint2X = 300;
var controlPoint2Y = 300;

function drawCircle() {
  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI);
  context.fill();
}

function drawPath() {
  context.beginPath();
  context.moveTo(100, 100);
  context.quadraticCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y);
  context.lineTo(400, 400);
  context.stroke();
}

function updatePosition() {
  x += 1;
  y += 1;
}

function animate() {
  requestAnimationFrame(animate);

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

  drawPath();
  drawCircle();

  updatePosition();
}

animate();
</script>

</body>
</html>