基于any2web+deepseek实现对三角函数定义的理解
参考文献：https://www.anytoweb.com/p/73f351a6.html
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<div class="container">
<header>
<h1>直角坐标系三角函数定义</h1>
<p class="subtitle">可视化演示三角函数在直角坐标系中的几何意义</p>
</header>
<div class="content">
<div class="canvas-container">
<canvas id="coordinateCanvas" width="500" height="500"></canvas>
<div class="controls">
<div class="angle-control">
<label for="angleSlider">角度 θ (度):</label>
<input type="range" id="angleSlider" min="0" max="360" value="45">
<span id="angleValue">45°</span>
</div>
<div class="angle-control">
<label for="pointX">点P坐标 X:</label>
<input type="range" id="pointX" min="-200" max="200" value="141">
<span id="xValue">141</span>
</div>
<div class="angle-control">
<label for="pointY">点P坐标 Y:</label>
<input type="range" id="pointY" min="-200" max="200" value="141">
<span id="yValue">141</span>
</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color sin"></div>
<span>正弦 (sin)</span>
</div>
<div class="legend-item">
<div class="legend-color cos"></div>
<span>余弦 (cos)</span>
</div>
<div class="legend-item">
<div class="legend-color tan"></div>
<span>正切 (tan)</span>
</div>
<div class="legend-item">
<div class="legend-color cot"></div>
<span>余切 (cot)</span>
</div>
<div class="legend-item">
<div class="legend-color sec"></div>
<span>正割 (sec)</span>
</div>
<div class="legend-item">
<div class="legend-color csc"></div>
<span>余割 (csc)</span>
</div>
<div class="legend-item">
<div class="legend-color point"></div>
<span>点P(x,y)</span>
</div>
</div>
</div>
<div class="info-panel">
<div class="trig-values">
<div class="trig-value">
<div class="trig-name">正弦 (sin)</div>
<div class="trig-equation">sin θ = y / r</div>
<div class="trig-result" id="sinValue">0.707</div>
</div>
<div class="trig-value">
<div class="trig-name">余弦 (cos)</div>
<div class="trig-equation">cos θ = x / r</div>
<div class="trig-result" id="cosValue">0.707</div>
</div>
<div class="trig-value">
<div class="trig-name">正切 (tan)</div>
<div class="trig-equation">tan θ = y / x</div>
<div class="trig-result" id="tanValue">1.000</div>
</div>
<div class="trig-value">
<div class="trig-name">余切 (cot)</div>
<div class="trig-equation">cot θ = x / y</div>
<div class="trig-result" id="cotValue">1.000</div>
</div>
<div class="trig-value">
<div class="trig-name">正割 (sec)</div>
<div class="trig-equation">sec θ = r / x</div>
<div class="trig-result" id="secValue">1.414</div>
</div>
<div class="trig-value">
<div class="trig-name">余割 (csc)</div>
<div class="trig-equation">csc θ = r / y</div>
<div class="trig-result" id="cscValue">1.414</div>
</div>
</div>
<div class="explanation">
<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>
</div>
</div>
<footer>
<p>三角函数直角坐标系定义演示 | 使用HTML5 Canvas和JavaScript实现</p>
</footer>
</div>
<script>
// 获取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>
展示：
