一、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/zh-tw/n/188757.html
微信掃一掃 
支付寶掃一掃 