javascript中的 三角函數(shù)
-
<template>
<div>
<header>正切函數(shù) 循環(huán) 定義域[-Math.PI/2, Math.PI/2] 值域(-無窮, +無窮)</header>
<canvas id="canvas"></canvas>
<header>雙曲線正弦函數(shù) (-無窮, +無窮) 值域(-無窮, +無窮)</header>
<canvas id="canvas2"></canvas>
<header>雙曲線余弦函數(shù) (-無窮, +無窮) 值域(1, +無窮)</header>
<canvas id="canvas3"></canvas>
<header>雙曲線正切函數(shù) (-無窮, +無窮) 值域(-1, 1)</header>
<canvas id="canvas4"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
name: 'math',
setup() {
// 絕對值
console.log(Math.abs(-1.3)); // 1.3
// 上舍入
console.log(Math.ceil(1.67)); // 2
// 下舍入
console.log(Math.floor(1.46)); // 1
// 四舍五入
console.log(Math.round(1.45)); // 1
console.log(Math.round(1.56)); // 2
// exp(x) 自然對數(shù)的x次冪
console.log(Math.exp(1)); // 2.718281828459045 e是自然對數(shù)的底數(shù)
// log(x) 返回x的自然對數(shù)
console.log(Math.log(Math.E)); // 1
// max 求數(shù)中的最大值
console.log(Math.max(5,6,7,9)); // 9
// min 求數(shù)中的最小值
console.log(Math.min(5,6,7,9)); // 5
// pow(x,y); 返回x的y次冪
console.log(Math.pow(3,2)); // 9
console.log(3**2); // 9
// sqrt(x) 返回x的平方根
console.log(Math.sqrt(100)); // 10
// trunc(x) 將x的小數(shù)部分去掉
console.log(Math.trunc(1.2345)); // 1
console.log(Math.trunc(-1.2345)); // -1
// 正切函數(shù)
console.log(Math.tan(45 / 180 * Math.PI)); // 0.99999... ~= 1
console.log(Math.tan(-45 / 180 * Math.PI)); // -0.99999... ~= -1
// 反正切換函數(shù)
console.log(Math.atan(1) * 180 / Math.PI); // 45度
console.log(Math.atan(-1) * 180 / Math.PI); // -45
// 返回從 x 軸到點 (x,y) 之間的角度。Math.atan2(y, x)
console.log(Math.atan2(1, 1) * 180 / Math.PI); // 45度
console.log(Math.atan2(-1, 1) * 180 / Math.PI); // -45
// 正弦
console.log(Math.sin(30 / 180 * Math.PI)); // 0.5
console.log(Math.sin(90 / 180 * Math.PI)); // 1
// 反正弦
console.log(Math.asin(1) * 180 / Math.PI); // 90度
console.log(Math.asin(0) * 180 / Math.PI); // 0度
// 余弦
console.log(Math.cos(0 / 180 * Math.PI)); // 1
console.log(Math.cos(60 / 180 * Math.PI)); // 0.5
// 反余弦
console.log(Math.acos(1) * 180 / Math.PI); // 0度
console.log(Math.acos(0) * 180 / Math.PI); // 90度
// 雙曲線正切函數(shù) tanh(x) 值(-1,1)
// 雙曲線正切函數(shù)=雙曲線正弦函數(shù)/雙曲線余弦函數(shù)
console.log(Math.tanh(0)); // 0
// 繪制正切函數(shù)
function drawTan(canvasDom, size=400){
const ctx = canvasDom.getContext('2d');
const radius = size/2;
canvasDom.width = size;
canvasDom.height = size;
ctx.lineWidth = 1;
ctx.strokeStyle = '#ff0000';
ctx.translate(radius, radius); // 原點移動到畫布中心
ctx.save();
for(let x = -radius; x < radius; x++){
const xtan = Math.tan((x / radius * (Math.PI / 2))) / 4; // 歸一化 [-1, 1] * (Math.pI / 2) 除以4是加了個系數(shù)
const y = -xtan * radius;
if(x === -radius){
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// 畫x軸
const fontSize = 18;
drawText({
ctx,
text: 'x',
x: radius - fontSize,
y: fontSize,
fontSize: 18,
fontColor: 'blue',
})
drawLine({
ctx,
startX: -radius,
startY: 0,
endX: radius,
endY: 0,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: radius,
y: 0,
direction: 'left',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
// 畫y軸
drawText({
ctx,
text: 'y',
x: 10,
y: -radius + fontSize,
fontSize,
fontColor: 'blue',
})
drawLine({
ctx,
startX: 0,
startY: radius,
endX: 0,
endY: -radius,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: 0,
y: -radius,
direction: 'top',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
}
// 繪制雙曲線正弦函數(shù)
function drawSinh(canvasDom, size=400){
const ctx = canvasDom.getContext('2d');
const radius = size/2;
canvasDom.width = size;
canvasDom.height = size;
ctx.lineWidth = 1;
ctx.strokeStyle = '#ff0000';
ctx.translate(radius, radius); // 原點移動到畫布中心
ctx.save();
for(let x = -radius; x < radius; x++){
const xtan = Math.sinh((x / radius * (Math.PI / 2))) /4; // 歸一化 [-1, 1] * (Math.pI / 2) 除以4是加了個系數(shù)讓曲線好看,否則太陡峭
const y = -xtan * radius;
if(x === -radius){
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// 畫x軸
const fontSize = 18;
drawText({
ctx,
text: 'x',
x: radius - fontSize,
y: fontSize,
fontSize: 18,
fontColor: 'blue',
})
drawLine({
ctx,
startX: -radius,
startY: 0,
endX: radius,
endY: 0,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: radius,
y: 0,
direction: 'left',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
// 畫y軸
drawText({
ctx,
text: 'y',
x: 10,
y: -radius + fontSize,
fontSize,
fontColor: 'blue',
})
drawLine({
ctx,
startX: 0,
startY: radius,
endX: 0,
endY: -radius,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: 0,
y: -radius,
direction: 'top',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
}
// 繪制雙曲線余弦函數(shù)
function drawCosh(canvasDom, size=400){
const ctx = canvasDom.getContext('2d');
const radius = size/2;
canvasDom.width = size;
canvasDom.height = size;
ctx.lineWidth = 1;
ctx.strokeStyle = '#ff0000';
ctx.translate(radius, radius); // 原點移動到畫布中心
ctx.save();
for(let x = -radius; x < radius; x++){
const xtan = Math.cosh((x / radius * (Math.PI / 2))) / 2; // 歸一化 [-1, 1] * (Math.pI / 2) 除以4是加了個系數(shù)讓曲線好看,否則太陡峭
const y = -xtan * radius;
if(x === -radius){
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// 畫x軸
const fontSize = 18;
drawText({
ctx,
text: 'x',
x: radius - fontSize,
y: fontSize,
fontSize: 18,
fontColor: 'blue',
})
drawLine({
ctx,
startX: -radius,
startY: 0,
endX: radius,
endY: 0,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: radius,
y: 0,
direction: 'left',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
// 畫y軸
drawText({
ctx,
text: 'y',
x: 10,
y: -radius + fontSize,
fontSize,
fontColor: 'blue',
})
drawLine({
ctx,
startX: 0,
startY: radius,
endX: 0,
endY: -radius,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: 0,
y: -radius,
direction: 'top',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
}
// 繪制雙曲線正切函數(shù)
function drawTanh(canvasDom, size=400){
const ctx = canvasDom.getContext('2d');
const radius = size/2;
canvasDom.width = size;
canvasDom.height = size;
ctx.lineWidth = 1;
ctx.strokeStyle = '#ff0000';
ctx.translate(radius, radius); // 原點移動到畫布中心
ctx.save();
for(let x = -radius; x < radius; x++){
const xtan = Math.tanh((x / radius * (Math.PI / 2))) / 2; // 歸一化 [-1, 1] * (Math.pI / 2) 除以4是加了個系數(shù)讓曲線好看,否則太陡峭
const y = -xtan * radius;
if(x === -radius){
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// 畫x軸
const fontSize = 18;
drawText({
ctx,
text: 'x',
x: radius - fontSize,
y: fontSize,
fontSize: 18,
fontColor: 'blue',
})
drawLine({
ctx,
startX: -radius,
startY: 0,
endX: radius,
endY: 0,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: radius,
y: 0,
direction: 'left',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
// 畫y軸
drawText({
ctx,
text: 'y',
x: 10,
y: -radius + fontSize,
fontSize,
fontColor: 'blue',
})
drawLine({
ctx,
startX: 0,
startY: radius,
endX: 0,
endY: -radius,
strokeColor: 'blue',
lineWidth: 1,
});
// 畫箭頭
drawArrow({
ctx,
x: 0,
y: -radius,
direction: 'top',
size: 10,
strokeColor: 'blue',
lineWidth: 1,
angle: 60,
});
}
/**
* 畫箭頭
* x,y箭頭頂點坐標(biāo)
* direction 方向 left,right,top,bottom
* size 箭頭斜邊邊長
* color 箭頭顏色
* bold 箭頭粗細(xì)
* angle 箭頭角度
* @param param0
*/
function drawArrow({ctx,x, y, direction='left', size=28, strokeColor='red', lineWidth=1, angle=60}){
// 半角
const halfAngle = angle / 2 * Math.PI / 180;
const sin = size * Math.sin(halfAngle);
const cos = size * Math.cos(halfAngle);
ctx.save();
ctx.beginPath(); // 確保每次繪制都是新的路徑
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeColor;
let startPoint, endPoint;
switch(direction){
case 'left':
startPoint = [x - cos, y - sin];
endPoint = [x - cos, y + sin];
break;
case 'right':
startPoint = [x + cos, y - sin];
endPoint = [x + cos, y + sin];
break;
case 'top':
startPoint = [x - sin, y + cos];
endPoint = [x + sin, y + cos];
break;
case 'bottom':
startPoint = [x - sin, y - cos];
endPoint = [x + sin, y - cos];
break;
}
const [startX, startY] = startPoint;
const [endX, endY] = endPoint;
console.log({startPoint, endPoint,sin, cos})
ctx.moveTo(startX,startY);
ctx.lineTo(x, y);
ctx.lineTo(endX, endY);
ctx.stroke();
ctx.restore();
}
// 畫線
function drawLine({ctx, startX, startY, endX, endY, strokeColor, lineWidth=1}){
ctx.save();
ctx.beginPath(); // 確保每次繪制都是新的路徑(畫線時要加beginPath，否則認(rèn)為和之前是一條線，顏色什么的會用之前的)
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
ctx.restore();
}
// 畫文字
function drawText({ctx, text, x, y, fontSize=18, fontColor='red'}){
ctx.save();
ctx.fillStyle = fontColor;
ctx.font = `${fontSize}px sans-serif`;
ctx.fillText(text, x, y);
ctx.restore();
}
onMounted(() => {
const canvas = document.querySelector('#canvas');
drawTan(canvas, 400);
const canvas2 = document.querySelector('#canvas2');
drawSinh(canvas2, 400);
const canvas3 = document.querySelector('#canvas3');
drawCosh(canvas3, 400);
const canvas4 = document.querySelector('#canvas4');
drawTanh(canvas4, 400);
})
return {}
}
});
</script>
<style scoped lang='scss'>
#canvas{
border: 1px solid red;
}
</style>
=
=
=
-
浙公網(wǎng)安備 33010602011771號