通过 Canvas 动画，轻松理解正弦和余弦

前端

2023-10-03 15:41:46

正弦和余弦：揭开三角函数的神秘面纱

什么是正弦和余弦？

对于大多数人来说，数学可能显得枯燥乏味，但对于设计师、程序员和许多其他专业人士而言，它在我们的日常工作中却扮演着至关重要的角色。今天，我们将深入探讨正弦和余弦这两个基本三角函数，它们在数学、物理和工程等领域有着广泛的应用。

正弦和余弦是三角形中对边和斜边之比以及邻边和斜边之比。简单来说，正弦是三角形中对边与斜边的比值，而余弦是邻边与斜边的比值。

正弦和余弦的应用

正弦和余弦在物理、工程等多个领域都有着举足轻重的应用。例如，在物理学中，正弦和余弦可以用来计算物体的运动轨迹，而在工程学中，它们可以用来计算建筑物的受力情况。

用 Canvas 动画理解正弦和余弦

为了更直观地理解正弦和余弦，我们可以使用 Canvas 动画来展示它们的图像和变化规律。

正弦函数动画

代码示例：

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

var amplitude = 100; // 振幅
var frequency = 1; // 频率

function drawSineWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var x = 0;
  var y = 0;
  for (var i = 0; i < canvas.width; i++) {
    y = amplitude * Math.sin(frequency * i);
    ctx.lineTo(x, y);
    x++;
  }

  ctx.stroke();
}

drawSineWave();

余弦函数动画

代码示例：

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

var amplitude = 100; // 振幅
var frequency = 1; // 频率

function drawCosineWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var x = 0;
  var y = 0;
  for (var i = 0; i < canvas.width; i++) {
    y = amplitude * Math.cos(frequency * i);
    ctx.lineTo(x, y);
    x++;
  }

  ctx.stroke();
}

drawCosineWave();