一、引言
三角函数在计算机图形学中扮演着至关重要的角色，它广泛应用于旋转、缩放、投影等各种图形变换中。理解和掌握三角函数是学习计算机图形学的基础。
二、基本三角函数
1. 正弦函数（Sine）
正弦函数是三角函数中最基本的函数之一，在 JavaScript 中，我们可以使用Math.sin()方法来计算正弦值。下面是一个简单的示例，展示了如何使用 JavaScript 计算一个角度的正弦值：
// 计算30度的正弦值
let angleInDegrees = 30;
// 将角度转换为弧度，因为JavaScript中的三角函数接受弧度值
let angleInRadians = angleInDegrees * (Math.PI / 180);
let sinValue = Math.sin(angleInRadians);
console.log("30度的正弦值是：" + sinValue);
2. 余弦函数（Cosine）
余弦函数也是常用的三角函数，在 JavaScript 中用Math.cos()计算。示例如下：
// 计算60度的余弦值
let angle = 60;
let radian = angle * (Math.PI / 180);
let cosValue = Math.cos(radian);
console.log("60度的余弦值是：" + cosValue);
3. 正切函数（Tangent）
正切函数在 JavaScript 中通过Math.tan()来计算。示例：
// 计算45度的正切值
let degree = 45;
let rad = degree * (Math.PI / 180);
let tanValue = Math.tan(rad);
console.log("45度的正切值是：" + tanValue);
三、三角函数在图形旋转中的应用
1. 二维平面上的旋转
在二维平面中，我们可以利用三角函数来实现图形的旋转。下面是一个使用 JavaScript 和 Canvas API 实现简单图形旋转的示例：
// 获取Canvas元素和绘图上下文
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = 400;
canvas.height = 400;
// 旋转角度（弧度）
let rotationAngle = 0;
function draw() {
// 清除Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 保存当前上下文状态
ctx.save();
// 将原点移动到Canvas中心
ctx.translate(canvas.width / 2, canvas.height / 2);
// 旋转上下文
ctx.rotate(rotationAngle);
// 绘制一个矩形
ctx.fillStyle = 'blue';
ctx.fillRect(-50, -30, 100, 60);
// 恢复上下文状态
ctx.restore();
// 更新旋转角度
rotationAngle += 0.01;
// 请求下一帧动画
requestAnimationFrame(draw);
}
// 开始动画
draw();
2. 三维空间中的旋转
在三维空间中，图形的旋转更为复杂，通常需要使用矩阵变换。下面是一个简单的三维旋转示例：
// 三维向量旋转函数
function rotateX(vector, angle) {
let y = vector[1] * Math.cos(angle) - vector[2] * Math.sin(angle);
let z = vector[1] * Math.sin(angle) + vector[2] * Math.cos(angle);
return [vector[0], y, z];
}
function rotateY(vector, angle) {
let x = vector[0] * Math.cos(angle) + vector[2] * Math.sin(angle);
let z = -vector[0] * Math.sin(angle) + vector[2] * Math.cos(angle);
return [x, vector[1], z];
}
function rotateZ(vector, angle) {
let x = vector[0] * Math.cos(angle) - vector[1] * Math.sin(angle);
let y = vector[0] * Math.sin(angle) + vector[1] * Math.cos(angle);
return [x, y, vector[2]];
}
// 使用示例
let point = [10, 5, 3];
let rotatedPoint = rotateX(point, Math.PI / 4);
console.log("绕X轴旋转45度后的点坐标：", rotatedPoint);
四、三角函数在波浪效果中的应用
1. 简单波浪动画
我们可以使用正弦函数创建波浪效果。下面是一个使用 Canvas 绘制波浪动画的示例：
// 获取Canvas元素和绘图上下文
let canvas = document.getElementById('waveCanvas');
let ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = 600;
canvas.height = 300;
// 波浪参数
let amplitude = 50; // 振幅
let frequency = 0.02; // 频率
let speed = 0.1; // 速度
let offset = 0; // 偏移量
function drawWave() {
// 清除Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置波浪颜色
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
// 绘制波浪曲线
for (let x = 0; x < canvas.width; x++) {
let y = Math.sin((x * frequency) + offset) * amplitude;
ctx.lineTo(x, canvas.height / 2 + y);
}
// 完成波浪形状
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
// 设置渐变填充
let gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'rgba(0, 150, 255, 0.7)');
gradient.addColorStop(1, 'rgba(0, 150, 255, 0.2)');
ctx.fillStyle = gradient;
ctx.fill();
// 更新偏移量
offset += speed;
// 请求下一帧动画
requestAnimationFrame(drawWave);
}
// 开始动画
drawWave();
五、三角函数在圆形运动中的应用
1. 圆周运动示例
利用三角函数可以实现物体绕圆形路径运动的效果。以下是一个示例：
// 获取Canvas元素和绘图上下文
let canvas = document.getElementById('circleCanvas');
let ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = 500;
canvas.height = 500;
// 圆的参数
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let radius = 150;
let angle = 0;
let speed = 0.02;
function drawCircleMotion() {
// 清除Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 计算物体在圆周上的位置
let x = centerX + Math.cos(angle) * radius;
let y = centerY + Math.sin(angle) * radius;
// 绘制圆轨道
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
ctx.lineWidth = 2;
ctx.stroke();
// 绘制运动物体
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// 更新角度
angle += speed;
// 请求下一帧动画
requestAnimationFrame(drawCircleMotion);
}
// 开始动画
drawCircleMotion();
六、总结
三角函数在计算机图形学中有着广泛的应用，无论是简单的二维图形变换，还是复杂的三维场景渲染，三角函数都是不可或缺的工具。通过本文的介绍和示例代码，你应该对三角函数在计算机图形学中的应用有了基本的了解。在实际开发中，你可以根据具体需求灵活运用这些知识，创造出更加丰富多彩的图形效果。
