基于any2web+deepseek实现对三角函数定义的理解

参考文献：https://www.anytoweb.com/p/73f351a6.html

代码:

<!DOCTYPE html>

<head>

<title>直角坐标系三角函数定义演示</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

}

body {

background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);

color: #fff;

min-height: 100vh;

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

}

.container {

max-width: 1200px;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

gap: 20px;

}

header {

text-align: center;

margin-bottom: 20px;

padding: 20px;

background: rgba(0, 0, 0, 0.4);

border-radius: 15px;

width: 100%;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

}

h1 {

font-size: 2.8rem;

margin-bottom: 10px;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

.subtitle {

font-size: 1.4rem;

opacity: 0.9;

}

.content {

display: flex;

flex-wrap: wrap;

gap: 30px;

justify-content: center;

width: 100%;

}

.canvas-container {

flex: 1;

min-width: 500px;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 15px;

padding: 20px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

display: flex;

flex-direction: column;

align-items: center;

}

#coordinateCanvas {

background: rgba(255, 255, 255, 0.95);

border-radius: 10px;

margin-bottom: 15px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}

.controls {

display: flex;

flex-direction: column;

gap: 15px;

width: 100%;

}

.angle-control {

display: flex;

align-items: center;

gap: 10px;

}

input[type="range"] {

flex: 1;

height: 10px;

border-radius: 5px;

background: linear-gradient(to right, #1a2a6c, #b21f1f);

outline: none;

}

.info-panel {

flex: 1;

min-width: 300px;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 15px;

padding: 25px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

display: flex;

flex-direction: column;

gap: 20px;

}

.trig-values {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 15px;

}

.trig-value {

background: rgba(255, 255, 255, 0.15);

padding: 15px;

border-radius: 10px;

text-align: center;

transition: all 0.3s ease;

}

.trig-value:hover {

transform: translateY(-5px);

background: rgba(255, 255, 255, 0.25);

}

.trig-name {

font-weight: bold;

font-size: 1.3rem;

margin-bottom: 8px;

}

.trig-equation {

font-size: 1.1rem;

margin-bottom: 5px;

}

.trig-result {

font-size: 1.4rem;

font-weight: bold;

}

.explanation {

background: rgba(255, 255, 255, 0.15);

padding: 20px;

border-radius: 10px;

line-height: 1.6;

}

.legend {

display: flex;

flex-wrap: wrap;

gap: 15px;

justify-content: center;

margin-top: 10px;

}

.legend-item {

display: flex;

align-items: center;

gap: 8px;

}

.legend-color {

width: 20px;

height: 20px;

border-radius: 4px;

}

.sin { background-color: #e74c3c; }

.cos { background-color: #3498db; }

.tan { background-color: #2ecc71; }

.cot { background-color: #f39c12; }

.sec { background-color: #9b59b6; }

.csc { background-color: #1abc9c; }

.point { background-color: #e84393; }

footer {

margin-top: 20px;

text-align: center;

padding: 15px;

font-size: 0.9rem;

opacity: 0.8;

}

@media (max-width: 768px) {

.content {

flex-direction: column;

}

.canvas-container, .info-panel {

min-width: 100%;

}

</style>

</head>

<body>

<h1>直角坐标系三角函数定义</h1>

<p class="subtitle">可视化演示三角函数在直角坐标系中的几何意义</p>

</header>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h3>直角坐标系中的三角函数定义</h3>

<p>在直角坐标系中，对于一个角 θ（顶点在原点，始边在x轴正半轴），其终边上任意一点 P(x, y) 到原点的距离为 r = √(x² + y²) > 0，则：</p>

<ul>

<li><strong>正弦 (sin)</strong>: 对边与斜边的比值，sin θ = y / r</li>

<li><strong>余弦 (cos)</strong>: 邻边与斜边的比值，cos θ = x / r</li>

<li><strong>正切 (tan)</strong>: 对边与邻边的比值，tan θ = y / x</li>

<li><strong>余切 (cot)</strong>: 邻边与对边的比值，cot θ = x / y</li>

<li><strong>正割 (sec)</strong>: 斜边与邻边的比值，sec θ = r / x</li>

<li><strong>余割 (csc)</strong>: 斜边与对边的比值，csc θ = r / y</li>

</ul>

<p>尝试移动角度滑块或直接拖动点P，观察三角函数值的变化！</p>

</div>

<p>三角函数直角坐标系定义演示 | 使用HTML5 Canvas和JavaScript实现</p>

</footer>

</div>

// 获取DOM元素

const canvas = document.getElementById('coordinateCanvas');

const ctx = canvas.getContext('2d');

const angleSlider = document.getElementById('angleSlider');

const angleValue = document.getElementById('angleValue');

const pointX = document.getElementById('pointX');

const pointY = document.getElementById('pointY');

const xValue = document.getElementById('xValue');

const yValue = document.getElementById('yValue');

// 三角函数值显示元素

const sinValue = document.getElementById('sinValue');

const cosValue = document.getElementById('cosValue');

const tanValue = document.getElementById('tanValue');

const cotValue = document.getElementById('cotValue');

const secValue = document.getElementById('secValue');

const cscValue = document.getElementById('cscValue');

// 初始值

let angle = 45; // 角度

let x = 141; // 点P的x坐标

let y = 141; // 点P的y坐标

// 更新显示值

function updateDisplayValues() {

angleValue.textContent = `${angle}°`;

xValue.textContent = x;

yValue.textContent = y;

}

// 计算三角函数值

function calculateTrigValues() {

const r = Math.sqrt(x*x + y*y);

// 计算三角函数值

const sin = y / r;

const cos = x / r;

const tan = y / x;

const cot = x / y;

const sec = r / x;

const csc = r / y;

// 更新显示

sinValue.textContent = sin.toFixed(3);

cosValue.textContent = cos.toFixed(3);

tanValue.textContent = tan.toFixed(3);

cotValue.textContent = cot.toFixed(3);

secValue.textContent = sec.toFixed(3);

cscValue.textContent = csc.toFixed(3);

}

// 绘制坐标系和三角函数

function drawCoordinateSystem() {

const centerX = canvas.width / 2;

const centerY = canvas.height / 2;

const scale = 2; // 缩放因子

// 清除画布

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制网格

ctx.strokeStyle = '#e0e0e0';

ctx.lineWidth = 0.5;

// 垂直线

for (let i = 0; i <= canvas.width; i += 50) {

ctx.beginPath();

ctx.moveTo(i, 0);

ctx.lineTo(i, canvas.height);

ctx.stroke();

}

// 水平线

for (let i = 0; i <= canvas.height; i += 50) {

ctx.beginPath();

ctx.moveTo(0, i);

ctx.lineTo(canvas.width, i);

ctx.stroke();

}

// 绘制坐标轴

ctx.strokeStyle = '#000';

ctx.lineWidth = 2;

// X轴

ctx.beginPath();

ctx.moveTo(0, centerY);

ctx.lineTo(canvas.width, centerY);

ctx.stroke();

// Y轴

ctx.beginPath();

ctx.moveTo(centerX, 0);

ctx.lineTo(centerX, canvas.height);

ctx.stroke();

// 绘制刻度

ctx.fillStyle = '#000';

ctx.font = '12px Arial';

ctx.textAlign = 'center';

ctx.textBaseline = 'top';

// X轴刻度

for (let i = -4; i <= 4; i++) {

if (i === 0) continue;

const xPos = centerX + i * 50;

ctx.beginPath();

ctx.moveTo(xPos, centerY - 5);

ctx.lineTo(xPos, centerY + 5);

ctx.stroke();

ctx.fillText(i, xPos, centerY + 10);

}

// Y轴刻度

ctx.textAlign = 'right';

ctx.textBaseline = 'middle';

for (let i = -4; i <= 4; i++) {

if (i === 0) continue;

const yPos = centerY - i * 50;

ctx.beginPath();

ctx.moveTo(centerX - 5, yPos);

ctx.lineTo(centerX + 5, yPos);

ctx.stroke();

ctx.fillText(i, centerX - 10, yPos);

}

// 原点标记

ctx.fillText('O', centerX - 10, centerY + 15);

ctx.fillText('X', canvas.width - 10, centerY + 15);

ctx.fillText('Y', centerX - 15, 10);

// 计算点P在画布上的位置

const pointXCanvas = centerX + x;

const pointYCanvas = centerY - y;

const r = Math.sqrt(x*x + y*y);

// 绘制从原点到点P的线段

ctx.strokeStyle = '#333';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(centerX, centerY);

ctx.lineTo(pointXCanvas, pointYCanvas);

ctx.stroke();

// 绘制从点P到X轴的垂线（sin）

ctx.strokeStyle = '#e74c3c';

ctx.lineWidth = 2;

ctx.setLineDash([5, 5]);

ctx.beginPath();

ctx.moveTo(pointXCanvas, pointYCanvas);

ctx.lineTo(pointXCanvas, centerY);

ctx.stroke();

ctx.setLineDash([]);

// 绘制从点P到Y轴的垂线（cos）

ctx.strokeStyle = '#3498db';

ctx.lineWidth = 2;

ctx.setLineDash([5, 5]);

ctx.beginPath();

ctx.moveTo(pointXCanvas, pointYCanvas);

ctx.lineTo(centerX, pointYCanvas);

ctx.stroke();

ctx.setLineDash([]);

// 绘制角θ

ctx.strokeStyle = '#9b59b6';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.arc(centerX, centerY, 30, 0, angle * Math.PI / 180, false);

ctx.stroke();

// 标记角θ

ctx.fillStyle = '#9b59b6';

ctx.font = 'bold 16px Arial';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

const labelAngle = angle / 2;

const labelX = centerX + 45 * Math.cos(labelAngle * Math.PI / 180);

const labelY = centerY - 45 * Math.sin(labelAngle * Math.PI / 180);

ctx.fillText('θ', labelX, labelY);

// 绘制点P

ctx.fillStyle = '#e84393';

ctx.beginPath();

ctx.arc(pointXCanvas, pointYCanvas, 8, 0, Math.PI * 2);

ctx.fill();

// 标记点P

ctx.fillStyle = '#e84393';

ctx.font = 'bold 16px Arial';

ctx.textAlign = 'left';

ctx.textBaseline = 'bottom';

ctx.fillText(`P( ${x},$ {y})`, pointXCanvas + 10, pointYCanvas - 10);

// 标记r

ctx.fillStyle = '#333';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

const midX = centerX + x/2;

const midY = centerY - y/2;

ctx.fillText(`r = ${r.toFixed(2)}`, midX, midY);

// 标记sin

ctx.fillStyle = '#e74c3c';

ctx.textAlign = 'right';

ctx.textBaseline = 'middle';

ctx.fillText(`sin θ = ${(y/r).toFixed(3)}`, pointXCanvas - 10, (centerY + pointYCanvas) / 2);

// 标记cos

ctx.fillStyle = '#3498db';

ctx.textAlign = 'center';

ctx.textBaseline = 'top';

ctx.fillText(`cos θ = ${(x/r).toFixed(3)}`, (centerX + pointXCanvas) / 2, pointYCanvas + 10);

// 绘制正切线（如果适用）

if (Math.abs(x) > 0) {

ctx.strokeStyle = '#2ecc71';

ctx.lineWidth = 2;

ctx.setLineDash([5, 5]);

ctx.beginPath();

ctx.moveTo(pointXCanvas, pointYCanvas);

// 延长线到单位圆切线

const tangentX = centerX + (x > 0 ? 200 : -200);

const tangentY = centerY - (y/x) * (tangentX - centerX);

ctx.lineTo(tangentX, tangentY);

ctx.stroke();

ctx.setLineDash([]);

// 标记tan

ctx.fillStyle = '#2ecc71';

ctx.textAlign = x > 0 ? 'left' : 'right';

ctx.textBaseline = 'middle';

ctx.fillText(`tan θ = ${(y/x).toFixed(3)}`, tangentX, tangentY);

}

// 事件监听器

angleSlider.addEventListener('input', function() {

angle = parseInt(this.value);

// 根据角度更新点P坐标

const rad = angle * Math.PI / 180;

const r = 200; // 半径固定为200

x = Math.round(r * Math.cos(rad));

y = Math.round(r * Math.sin(rad));

pointX.value = x;

pointY.value = y;

updateDisplayValues();

calculateTrigValues();

drawCoordinateSystem();

});

pointX.addEventListener('input', function() {

x = parseInt(this.value);

// 更新角度

angle = Math.round(Math.atan2(y, x) * 180 / Math.PI);

if (angle < 0) angle += 360;

angleSlider.value = angle;

updateDisplayValues();

calculateTrigValues();

drawCoordinateSystem();

});

pointY.addEventListener('input', function() {

y = parseInt(this.value);

// 更新角度

angle = Math.round(Math.atan2(y, x) * 180 / Math.PI);

if (angle < 0) angle += 360;

angleSlider.value = angle;

updateDisplayValues();

calculateTrigValues();

drawCoordinateSystem();

});

// 初始化

updateDisplayValues();

calculateTrigValues();

drawCoordinateSystem();

</script>

</body>

</html>

展示：