一、jsMath.sin函数概览
在介绍使用jsMath.sin函数的实例之前，我们先来了解一下jsMath.sin函数。
jsMath.sin() 方法返回一个数字 x 的正弦值，其参数x是以弧度方式指定的。 您可以通过将角度乘以（Math.PI/180）来将角度转换为弧度。例如：Math.sin(90*(Math.PI/180))。
二、jsMath.sin函数的基本用法
使用jsMath.sin函数的基本方法是指定一个角度，然后调用Math.sin(angle)方法得到角度的正弦值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsMath.sin实例</title>
</head>
<body>
<script>
var angle = 30 * Math.PI / 180; // 将角度转换为弧度
document.write("sin(" + angle + ") = " + Math.sin(angle));
</script>
</body>
</html>
该程序输出结果为：sin(0.5235987755982988) = 0.49999999999999994
三、jsMath.sin函数实例：正弦函数图像
jsMath.sin函数在数学中有着广泛的应用，例如在绘制正弦函数图像时就可以使用该函数。下面是一个实现绘制正弦函数曲线的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sin函数图像</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// 绘制坐标轴
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
context.beginPath();
context.moveTo(width / 2, 0);
context.lineTo(width / 2, height);
context.stroke();
// 绘制正弦函数
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 2;
for (var x = 0; x < width; x++) {
var angle = (x - width / 2) / width * 2 * Math.PI; // 将像素转换为角度
var y = height / 2 - Math.sin(angle) * height / 4; // 计算y坐标
if (x == 0) {
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
}
context.stroke();
</script>
</body>
</html>
该程序绘制出正弦函数的图像，如下所示：
四、jsMath.sin函数实例：动态正弦函数图像
我们可以通过在定时器中不断修改角度来实现正弦函数图像的动态展示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态正弦函数图像</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var angle = 0;
setInterval(function() {
// 清空画布
context.clearRect(0, 0, width, height);
// 绘制坐标轴
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
context.beginPath();
context.moveTo(width / 2, 0);
context.lineTo(width / 2, height);
context.stroke();
// 绘制正弦函数
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 2;
for (var x = 0; x < width; x++) {
var angle2 = (x - width / 2) / width * 2 * Math.PI + angle;
var y = height / 2 - Math.sin(angle2) * height / 4;
if (x == 0) {
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
}
context.stroke();
// 修改角度
angle += 0.1;
}, 50);
</script>
</body>
</html>
该程序实现了动态正弦函数图像的效果，如下所示：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188757.html
微信扫一扫 
支付宝扫一扫 