JavaScript 动态三角函数实例详解

引言

本文将详细讲解如何使用JavaScript实现动态三角函数。三角函数是数学中的重要概念，而动态三角函数则是将三角函数与图形可视化相结合的效果，将这种效果实现在Web应用程序中，离不开JavaScript的帮助。

必要的准备工作

在本例中，我们将使用HTML、CSS和JavaScript来实现三角函数。打开你的文本编辑器并建立一个名为index.html的文件。复制以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 动态三角函数</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>JavaScript 动态三角函数实例详解</h1>
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

我们使用了一个canvas元素，它将用于绘制我们的三角函数图形。

CSS 样式设置

在CSS文件（style.css）中，我们将对我们的canvas元素进行格式设置，使之与我们的主要HTML页面保持一致。

canvas {
    display: block;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

JavaScript代码实现

第一步：创建一个Canvas对象

我们需要使用JavaScript API来创建一个2D上下文引用，使用DOM API将canvas元素添加到页面上。需要在主.js文件中编写以下代码：

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

第二步：绘制坐标轴

我们需要使用canvas的API来绘制坐标轴。我们需要使用lineTo方法来绘制垂直和水平的线，然后使用stroke方法来设置线条颜色并将它们绘制出来。需要在主.js文件中编写以下代码：

ctx.beginPath();
ctx.moveTo(30, 0);
ctx.lineTo(30, canvas.height - 30);
ctx.lineTo(canvas.width, canvas.height - 30);
ctx.strokeStyle = "#000";
ctx.stroke();

第三步：确定坐标轴上下限

我们需要使用变量来控制图表范围，以便我们可以缩放图表并使其更容易阅读。在本例中，我们将设置变量的值以限制图表范围。需要在主.js文件中编写以下代码：

let xAxisMin = -Math.PI;
let xAxisMax = Math.PI;
let yAxisMin = -2;
let yAxisMax = 2;

第四步：绘制正弦函数

我们需要使用sin方法绘制正弦函数，因为这是最常见的三角函数之一。我们将使用一个横坐标值数组和一个纵坐标值数组，然后使用线性插值来绘制函数。需要在主.js文件中编写以下代码：

let yValues = [];
let xValues = [];

for(let x = xAxisMin; x < xAxisMax; x = x + 0.1){
    xValues.push(30 + ((x - xAxisMin) / (xAxisMax - xAxisMin)) * (canvas.width - 30));
    yValues.push( canvas.height - 30 - ((Math.sin(x) - yAxisMin) / (yAxisMax - yAxisMin)) * (canvas.height - 30));
}

ctx.beginPath();
ctx.moveTo(xValues[0], yValues[0]);

for(let i = 1; i < xValues.length; i++){
    ctx.lineTo(xValues[i], yValues[i]);
}

ctx.strokeStyle = "#00f";
ctx.stroke();

第五步：绘制余弦函数

我们还需要使用cos方法绘制余弦函数。需要在主.js文件中编写以下代码：

let yValues_cos = [];
let xValues_cos = [];

for(let x = xAxisMin; x < xAxisMax; x = x + 0.1){
    xValues_cos.push(30 + ((x - xAxisMin) / (xAxisMax - xAxisMin)) * (canvas.width - 30));
    yValues_cos.push( canvas.height - 30 - ((Math.cos(x) - yAxisMin) / (yAxisMax - yAxisMin)) * (canvas.height - 30));
}

ctx.beginPath();
ctx.moveTo(xValues_cos[0], yValues_cos[0]);

for(let i = 1; i < xValues_cos.length; i++){
    ctx.lineTo(xValues_cos[i], yValues_cos[i]);
}

ctx.strokeStyle = "#f00";
ctx.stroke();