利萨如曲线，用Canvas和GSAP实现一场视觉的盛宴！

2023-11-19 20:30:16

用 Canvas 和 GSAP 实现利萨如曲线：一场视觉艺术盛宴

揭秘利萨如曲线的迷人世界

各位创意伙伴，准备好在视觉艺术的海洋中畅游了吗？今天，我们将携手踏上利萨如曲线的探索之旅，它那优雅的形态和无限的可能性定会让你们赞叹不已。准备好你们的画布和画笔（当然，是数字版的），因为我们将使用 Canvas 和 GSAP 来绘制出这些令人惊叹的曲线。

什么是利萨如曲线？

利萨如曲线是一种迷人而具有艺术性的曲线，由两个垂直振荡正弦函数的叠加而产生。想象一下，一个单摆在水平方向上摆动，而另一个在垂直方向上摆动，当它们的运动重叠时，就会形成一个不断变化的图案——这就是利萨如曲线。

这些曲线因其独特的美感而闻名，不仅在数学和物理学领域应用广泛，在艺术界也备受青睐。它们为动画、交互式图形和令人惊叹的艺术品注入了生命，为我们的视觉体验增添了一抹令人着迷的魅力。

Canvas 和 GSAP：数字画布上的帮手

要绘制利萨如曲线，我们需要借助 Canvas 和 GSAP 这两位得力助手。Canvas 是 HTML5 中的一个元素，它允许我们在网页上创建和操作图形，而 GSAP（绿色袜子动画平台）是一个强大的 JavaScript 库，专门用于创建流畅的动画。

代码之旅：绘制利萨如曲线

准备好迎接技术时刻了吗？下面，我们将逐步分解绘制利萨如曲线的代码，让你们轻松上手。

创建 Canvas 元素：

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

获取 Canvas 上下文对象：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

设置背景色：

ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制利萨如曲线：

function drawLissajousCurve(xFrequency, yFrequency, xAmplitude, yAmplitude, phaseDifference) {
  ctx.beginPath();
  for (let t = 0; t <= 2 * Math.PI; t += 0.01) {
    let x = xAmplitude * Math.sin(xFrequency * t + phaseDifference);
    let y = yAmplitude * Math.sin(yFrequency * t);
    ctx.lineTo(x + canvas.width / 2, y + canvas.height / 2);
  }
  ctx.strokeStyle = "#ff0000";
  ctx.stroke();
}