设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 三角函数可视化
返回列表 发新帖
查看: 56|回复: 2

[作品展示] 三角函数可视化

[复制链接]
匿名鱼油
发表于 3 天前 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
f177adeabb3abd1c7842751226db29df.png

作品介绍：

通过鼠标可以在圆中转动角度，在下图中的三角函数图像上显示该角度所在的位置

在左侧的小面板上显示坐标位置、j角度值以及三角函数值

2333.gif

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>三角函数 · 单位圆联动（多圈角度 · 内圈优先）</title>
  7. <style>
  8.   :root{
  9.     --bg:#f7ebc5;
  10.     --panel:#ffffff;
  11.     --ink:#222;
  12.     --grid:#ececec;
  13.     --axes:#333;
  14.     --cos:#1f6afe;
  15.     --sin:#1fbf6b;
  16.     --tan:#ff6a3d;
  17.     --point:#e03131;
  18.     --shadow:0 6px 18px rgba(0,0,0,.08);
  19.     --radius:12px;
  20.   }
  21.   *{box-sizing:border-box}
  22.   body{
  23.     margin:0;
  24.     background:var(--bg);
  25.     color:var(--ink);
  26.     font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei","Noto Sans",Arial,sans-serif;
  27.   }
  28.   .app{
  29.     min-height:100vh;
  30.     padding:14px;
  31.     display:grid;
  32.     grid-template-columns: 280px 1fr 240px;
  33.     grid-template-rows: auto 1fr;
  34.     gap:14px;
  35.   }
  36.   @media (max-width: 1080px){
  37.     .app{
  38.       grid-template-columns: 1fr;
  39.       grid-template-rows: auto auto auto;
  40.     }
  41.   }
  42.   .card{
  43.     background:var(--panel);
  44.     border-radius:var(--radius);
  45.     box-shadow:var(--shadow);
  46.     padding:12px;
  47.   }
  48.   .panel-left{grid-column:1;grid-row:1/span 2}
  49.   .center-top{grid-column:2;grid-row:1}
  50.   .center-bottom{grid-column:2;grid-row:2}
  51.   .panel-right{grid-column:3;grid-row:1/span 2}
  52.   @media (max-width:1080px){
  53.     .panel-left{grid-column:1;grid-row:auto}
  54.     .center-top{grid-column:1}
  55.     .center-bottom{grid-column:1}
  56.     .panel-right{grid-column:1}
  57.   }

  59.   h3{margin:6px 0 10px;font-size:16px}
  60.   .kv{display:grid;grid-template-columns: 88px 1fr; gap:6px 8px; align-items:center}
  61.   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

  63.   .canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;min-height:260px}
  64.   .plot-wrap{position:relative;width:100%;aspect-ratio: 5/2; min-height:240px}
  65.   canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:8px;background:#fff}

  67.   .ctrls{display:grid;gap:10px}
  68.   .ctrls .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  69.   label{user-select:none}
  70.   input[type="range"]{width:100%}
  71.   button{padding:8px 12px;border-radius:10px;border:1px solid #d6dde4;background:#fff;cursor:pointer}
  72.   button.primary{background:linear-gradient(180deg,#ffd27d,#ff9f1a);color:#222;border:none}
  73. </style>
  74. </head>
  75. <body>
  76.   <div class="app">
  77.     <!-- 左侧数值面板 -->
  78.     <section class="card panel-left">
  79.       <h3>值</h3>
  80.       <div class="kv">
  81.         <div>角</div><div id="angleRead" class="mono">0.0°</div>
  82.         <div>(x, y)</div><div id="xyRead" class="mono">(1.000, 0.000)</div>
  83.         <div id="exprName" class="mono">cosθ =</div>
  84.         <div id="exprVal" class="mono">x / 1 = 1.000</div>
  85.       </div>
  86.       <hr/>
  87.       <div>
  88.         <label><input type="radio" name="unit" value="deg" checked> 度</label>
  89.         <label style="margin-left:12px"><input type="radio" name="unit" value="rad"> 弧度</label>
  90.       </div>
  91.     </section>

  93.     <!-- 中央单位圆（半径=1，坐标补全，视角拉远） -->
  94.     <section class="card center-top">
  95.       <div class="canvas-wrap">
  96.         <canvas id="circle" aria-label="单位圆画布"></canvas>
  97.       </div>
  98.     </section>

  100.     <!-- 下方函数曲线（坐标补全） -->
  101.     <section class="card center-bottom">
  102.       <div class="plot-wrap">
  103.         <canvas id="plot" aria-label="三角函数曲线画布"></canvas>
  104.       </div>
  105.     </section>

  107.     <!-- 右侧控制 -->
  108.     <aside class="card panel-right">
  109.       <h3>显示</h3>
  110.       <div class="ctrls">
  111.         <div>
  112.           <label><input type="radio" name="func" value="cos" checked> <span style="color:var(--cos)">cos</span></label>
  113.           <label style="margin-left:12px"><input type="radio" name="func" value="sin"> <span style="color:var(--sin)">sin</span></label>
  114.           <label style="margin-left:12px"><input type="radio" name="func" value="tan"> <span style="color:var(--tan)">tan</span></label>
  115.         </div>
  116.         <div class="row">
  117.           <label><input type="checkbox" id="annotations" checked> 标识</label>
  118.           <label><input type="checkbox" id="grid" checked> 网格</label>
  119.         </div>
  120.         <hr/>
  121.         <div class="row" style="align-items:center">
  122.           <label style="width:56px">角度</label>
  123.           <input type="range" id="thetaRange" min="-720" max="720" step="0.1" value="0" />
  124.           <span class="mono" id="thetaLabel">0°</span>
  125.         </div>
  126.         <div class="row">
  127.           <button id="reset">重置</button>
  128.           <button id="save" class="primary">下载 PNG</button>
  129.         </div>
  130.       </div>
  131.     </aside>
  132.   </div>

  134. <script>
  135. (() => {
  136.   // 视角：单位圆视图
  137.   const VIEW_RANGE = 2;
  138.   const GRID_STEP = 0.5;
  139.   const MARGIN = 18;

  141.   // 状态
  142.   const state = {
  143.     theta: 0,            // 角度（度），可达 ±720°
  144.     func: 'cos',
  145.     unit: 'deg',
  146.     showGrid: true,
  147.     showAnnotations: true
  148.   };

  150.   // DOM
  151.   const circle = document.getElementById('circle');
  152.   const plot = document.getElementById('plot');
  153.   const ctxC = circle.getContext('2d');
  154.   const ctxP = plot.getContext('2d');

  156.   const thetaRange = document.getElementById('thetaRange');
  157.   const thetaLabel = document.getElementById('thetaLabel');
  158.   const angleRead = document.getElementById('angleRead');
  159.   const xyRead = document.getElementById('xyRead');
  160.   const exprName = document.getElementById('exprName');
  161.   const exprVal = document.getElementById('exprVal');

  163.   const radiosFunc = [...document.querySelectorAll('input[name="func"]')];
  164.   const radiosUnit = [...document.querySelectorAll('input[name="unit"]')];
  165.   const chkGrid   = document.getElementById('grid');
  166.   const chkAnno   = document.getElementById('annotations');

  168.   const btnReset = document.getElementById('reset');
  169.   const btnSave  = document.getElementById('save');

  171.   // 工具
  172.   const deg2rad = d => d * Math.PI / 180;
  173.   const rad2deg = r => r * 180 / Math.PI;
  174.   const clamp = (v,min,max)=>Math.min(max,Math.max(min,v));
  175.   const fmt = n => {
  176.     if (!isFinite(n)) return '—';
  177.     const near0 = Math.abs(n) < 5e-4 ? 0 : n;
  178.     return near0.toFixed(3);
  179.   };
  180.   const getVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  181.   const colorFor = f => f==='cos' ? getVar('--cos') : (f==='sin' ? getVar('--sin') : getVar('--tan'));

  183.   // 自适应画布
  184.   function fitCanvas(canvas, ctx){
  185.     const rect = canvas.getBoundingClientRect();
  186.     const dpr = Math.max(1, window.devicePixelRatio || 1);
  187.     canvas.width = Math.floor(rect.width * dpr);
  188.     canvas.height = Math.floor(rect.height * dpr);
  189.     ctx.setTransform(1,0,0,1,0,0);
  190.     ctx.scale(dpr, dpr);
  191.   }
  192.   function resizeAll(){
  193.     fitCanvas(circle, ctxC);
  194.     fitCanvas(plot, ctxP);
  195.     drawAll();
  196.   }
  197.   window.addEventListener('resize', resizeAll, {passive:true});

  199.   // 角度滑块
  200.   thetaRange.addEventListener('input', e=>{
  201.     state.theta = +e.target.value;
  202.     syncUI();
  203.     drawAll();
  204.   });

  206.   // 函数选择
  207.   radiosFunc.forEach(r=>r.addEventListener('change', e=>{
  208.     if(e.target.checked){ state.func = e.target.value; drawAll(); syncUI(); }
  209.   }));

  211.   // 单位选择
  212.   radiosUnit.forEach(r=>r.addEventListener('change', e=>{
  213.     if(e.target.checked){ state.unit = e.target.value; syncUI(); drawAll(); }
  214.   }));

  216.   // 选项
  217.   chkGrid.addEventListener('change', e=>{ state.showGrid = e.target.checked; drawAll(); });
  218.   chkAnno.addEventListener('change', e=>{ state.showAnnotations = e.target.checked; drawAll(); });

  220.   // 拖动单位圆上的红点（角度解包，支持连续累计到 ±720°）
  221.   (function enableCircleDrag(){
  222.     let dragging = false;
  223.     let lastRawDeg = 0; // 上一帧 atan2 的原始角（-180,180]

  225.     function rawDegFromEvent(ev){
  226.       const rect = circle.getBoundingClientRect();
  227.       const cx = rect.width/2, cy = rect.height/2;
  228.       const x = ev.clientX - (rect.left + cx);
  229.       const y = ev.clientY - (rect.top + cy);
  230.       return rad2deg(Math.atan2(-y, x)); // [-180,180]
  231.     }

  233.     function onMove(ev){
  234.       if (!dragging) return;
  235.       const raw = rawDegFromEvent(ev);
  236.       let delta = raw - lastRawDeg;
  237.       // 解包到最短角差（避免 180&#8596;-180 跳变）
  238.       if (delta > 180) delta -= 360;
  239.       else if (delta < -180) delta += 360;

  241.       state.theta = clamp(state.theta + delta, -720, 720);
  242.       lastRawDeg = raw;

  244.       thetaRange.value = state.theta;
  245.       syncUI();
  246.       drawAll();
  247.     }

  249.     circle.addEventListener('pointerdown', ev=>{
  250.       dragging = true;
  251.       circle.setPointerCapture(ev.pointerId);
  252.       lastRawDeg = rawDegFromEvent(ev); // 记录起始角，不立刻改 θ
  253.     });
  254.     circle.addEventListener('pointermove', onMove);
  255.     circle.addEventListener('pointerup',   ()=> dragging = false);
  256.     circle.addEventListener('pointercancel',()=> dragging = false);
  257.   })();

  259.   // 文本 UI
  260.   function syncUI(){
  261.     const deg = state.theta;
  262.     const rad = deg2rad(deg);
  263.     thetaLabel.textContent = `${deg.toFixed(1)}°`;
  264.     angleRead.textContent = state.unit==='deg' ? `${deg.toFixed(1)}°` : `${fmt(rad)} rad`;

  266.     const x = Math.cos(rad), y = Math.sin(rad);
  267.     xyRead.textContent = `(${fmt(x)}, ${fmt(y)})`;

  269.     let name = state.func + 'θ =';
  270.     let expr;
  271.     if (state.func === 'cos') expr = `x / 1 = ${fmt(x)}`;
  272.     else if (state.func === 'sin') expr = `y / 1 = ${fmt(y)}`;
  273.     else expr = (Math.abs(Math.cos(rad)) < 1e-6) ? '未定义' : `y / x = ${fmt(Math.tan(rad))}`;
  274.     exprName.textContent = name;
  275.     exprVal.textContent = expr;
  276.   }

  278.   // 绘制单位圆（半径=1，坐标补全 + 多圈角度弧）
  279.   function drawCircle(){
  280.     const rect = circle.getBoundingClientRect();
  281.     const w = rect.width, h = rect.height;
  282.     const cx = w/2, cy = h/2;

  284.     // 1 单位像素
  285.     const unitPx = (Math.min(w,h) - 2*MARGIN) / (2*VIEW_RANGE);
  286.     const sx = x => cx + x * unitPx;
  287.     const sy = y => cy - y * unitPx;

  289.     // 背景
  290.     ctxC.clearRect(0,0,w,h);
  291.     ctxC.fillStyle = '#ffffff';
  292.     ctxC.fillRect(0,0,w,h);

  294.     // 网格
  295.     if (state.showGrid){
  296.       ctxC.save();
  297.       ctxC.strokeStyle = '#f3f3f3';
  298.       ctxC.lineWidth = 1;
  299.       ctxC.beginPath();
  300.       for(let x = -VIEW_RANGE; x <= VIEW_RANGE + 1e-9; x += GRID_STEP){
  301.         const X = Math.round(sx(x)) + 0.5;
  302.         ctxC.moveTo(X, 0); ctxC.lineTo(X, h);
  303.       }
  304.       for(let y = -VIEW_RANGE; y <= VIEW_RANGE + 1e-9; y += GRID_STEP){
  305.         const Y = Math.round(sy(y)) + 0.5;
  306.         ctxC.moveTo(0, Y); ctxC.lineTo(w, Y);
  307.       }
  308.       ctxC.stroke();
  309.       ctxC.restore();
  310.     }

  312.     // 坐标轴 + 箭头
  313.     const axesColor = getVar('--axes') || '#333';
  314.     ctxC.save();
  315.     ctxC.strokeStyle = axesColor;
  316.     ctxC.lineWidth = 1.6;

  318.     const y0 = sy(0);
  319.     ctxC.beginPath(); ctxC.moveTo(MARGIN/2, y0); ctxC.lineTo(w - MARGIN/2, y0); ctxC.stroke();
  320.     const x0 = sx(0);
  321.     ctxC.beginPath(); ctxC.moveTo(x0, MARGIN/2); ctxC.lineTo(x0, h - MARGIN/2); ctxC.stroke();
  322.     drawArrow(ctxC, w - MARGIN/2, y0, 'right', axesColor);
  323.     drawArrow(ctxC, x0, MARGIN/2, 'up', axesColor);

  325.     // 刻度（主整数，次 0.5）
  326.     ctxC.strokeStyle = '#8b98a8';
  327.     ctxC.lineWidth = 1;
  328.     for (let v=-VIEW_RANGE; v<=VIEW_RANGE+1e-9; v+=GRID_STEP){
  329.       const X = sx(v), len = (Math.abs(v % 1) < 1e-9) ? 6 : 3;
  330.       ctxC.beginPath(); ctxC.moveTo(X, y0-len); ctxC.lineTo(X, y0+len); ctxC.stroke();
  331.     }
  332.     for (let v=-VIEW_RANGE; v<=VIEW_RANGE+1e-9; v+=GRID_STEP){
  333.       const Y = sy(v), len = (Math.abs(v % 1) < 1e-9) ? 6 : 3;
  334.       ctxC.beginPath(); ctxC.moveTo(x0-len, Y); ctxC.lineTo(x0+len, Y); ctxC.stroke();
  335.     }
  336.     // 标签
  337.     ctxC.fillStyle = '#445';
  338.     ctxC.font = '12px system-ui, -apple-system, Segoe UI, Roboto';
  339.     ctxC.textAlign = 'center'; ctxC.textBaseline = 'top';
  340.     for (let v=-VIEW_RANGE; v<=VIEW_RANGE; v++){
  341.       const X = sx(v); ctxC.fillText(String(v), X, y0 + 8);
  342.     }
  343.     ctxC.textAlign = 'right'; ctxC.textBaseline = 'middle';
  344.     for (let v=-VIEW_RANGE; v<=VIEW_RANGE; v++){
  345.       const Y = sy(v); ctxC.fillText(String(v), x0 - 8, Y);
  346.     }
  347.     ctxC.textAlign = 'left'; ctxC.textBaseline = 'top';
  348.     ctxC.fillText('0', x0 + 6, y0 + 6);
  349.     ctxC.textAlign = 'right'; ctxC.textBaseline = 'top'; ctxC.fillText('x', w - MARGIN/2 - 6, y0 + 6);
  350.     ctxC.textAlign = 'left'; ctxC.textBaseline = 'bottom'; ctxC.fillText('y', x0 + 6, MARGIN/2 + 12);
  351.     ctxC.restore();

  353.     // 单位圆（半径=1）
  354.     ctxC.beginPath();
  355.     ctxC.lineWidth = 2;
  356.     ctxC.strokeStyle = '#000';
  357.     ctxC.arc(sx(0), sy(0), 1 * unitPx, 0, Math.PI*2);
  358.     ctxC.stroke();

  360.     // 当前点
  361.     const rad = deg2rad(state.theta);
  362.     const px = sx(Math.cos(rad));
  363.     const py = sy(Math.sin(rad));

  365.     // 半径线
  366.     ctxC.beginPath();
  367.     ctxC.moveTo(sx(0), sy(0));
  368.     ctxC.lineTo(px, py);
  369.     ctxC.strokeStyle = '#2b60ff';
  370.     ctxC.lineWidth = 2;
  371.     ctxC.stroke();

  373.     // 角度弧：第一圈在内、第二圈向外扩展
  374.     if (state.showAnnotations){
  375.       drawAngleRings(ctxC, sx(0), sy(0), unitPx, rad);
  376.     }

  378.     // 投影线
  379.     if (state.showAnnotations){
  380.       ctxC.save();
  381.       ctxC.setLineDash([6,4]);
  382.       ctxC.strokeStyle = '#000';
  383.       ctxC.lineWidth = 1.2;
  384.       ctxC.beginPath(); ctxC.moveTo(px, py); ctxC.lineTo(px, sy(0)); ctxC.stroke();
  385.       ctxC.beginPath(); ctxC.moveTo(px, py); ctxC.lineTo(sx(0), py); ctxC.stroke();
  386.       ctxC.restore();
  387.     }

  389.     // 红点
  390.     ctxC.beginPath();
  391.     ctxC.arc(px, py, 5, 0, Math.PI*2);
  392.     ctxC.fillStyle = getVar('--point') || '#e03131';
  393.     ctxC.strokeStyle = '#fff';
  394.     ctxC.lineWidth = 2;
  395.     ctxC.fill(); ctxC.stroke();
  396.   }

  398.   // 多圈角度弧（第一圈=内圈，第二圈=外圈）
  399.   function drawAngleRings(ctx, cx, cy, unitPx, thetaRad){
  400.     const dir = thetaRad >= 0 ? 1 : -1;
  401.     const A = Math.abs(thetaRad);
  402.     const fullTurns = Math.floor(A / (2*Math.PI)); // 已完成的整圈数：0,1,2
  403.     const rem = A - fullTurns * (2*Math.PI);       // 当前圈的剩余角度
  404.     const baseR = unitPx * 0.45; // 内圈半径（更靠近圆心、更小）
  405.     const gap   = unitPx * 0.14; // 圈间距（向外渐增）

  407.     ctx.save();
  408.     ctx.strokeStyle = '#2b60ff';
  409.     ctx.lineWidth = 2;
  410.     ctx.lineCap = 'round';

  412.     // 1) 先把已经完成的整圈，从内往外画满圈（无箭头）
  413.     for (let i = 0; i < fullTurns; i++){
  414.       const r = Math.max(6, baseR + i*gap);
  415.       ctx.beginPath();
  416.       ctx.arc(cx, cy, r, 0, Math.PI*2, dir < 0);
  417.       ctx.stroke();
  418.     }

  420.     // 2) 当前未完成的圈，画在“下一圈”（外侧）上，并加箭头
  421.     if (rem > 1e-6){
  422.       const rRem = Math.max(6, baseR + fullTurns*gap);
  423.       drawArcSegmentWithArrow(ctx, cx, cy, rRem, dir * rem);
  424.     }

  426.     ctx.restore();
  427.   }

  429.   // 从 0 到 theta 的弧线 + 箭头（theta 可正可负）
  430.   function drawArcSegmentWithArrow(ctx, cx, cy, r, theta){
  431.     const steps = Math.max(12, Math.ceil(Math.abs(theta) / (Math.PI / 48)));
  432.     let xPrev = cx + r, yPrev = cy; // 起点：+x 方向
  433.     let xCurr = xPrev, yCurr = yPrev;

  435.     ctx.save();
  436.     ctx.strokeStyle = '#2b60ff';
  437.     ctx.lineWidth = 2;

  439.     ctx.beginPath();
  440.     ctx.moveTo(xPrev, yPrev);
  441.     for (let i=1;i<=steps;i++){
  442.       const t = theta * (i/steps);
  443.       const x = cx + r * Math.cos(t);
  444.       const y = cy - r * Math.sin(t);
  445.       xPrev = xCurr; yPrev = yCurr;
  446.       xCurr = x;     yCurr = y;
  447.       ctx.lineTo(x, y);
  448.     }
  449.     ctx.stroke();

  451.     // 箭头
  452.     const vx = xCurr - xPrev;
  453.     const vy = yCurr - yPrev;
  454.     const len = Math.hypot(vx, vy) || 1;
  455.     const ux = vx/len, uy = vy/len;
  456.     const ah = 8, aw = 6;
  457.     ctx.fillStyle = '#2b60ff';
  458.     ctx.beginPath();
  459.     ctx.moveTo(xCurr, yCurr);
  460.     ctx.lineTo(xCurr - ux*ah + (-uy)*aw, yCurr - uy*ah + (ux)*aw);
  461.     ctx.lineTo(xCurr - ux*ah - (-uy)*aw, yCurr - uy*ah - (ux)*aw);
  462.     ctx.closePath();
  463.     ctx.fill();

  465.     ctx.restore();
  466.   }

  468.   // 绘制三角函数曲线（坐标补全）
  469.   function drawPlot(){
  470.     const rect = plot.getBoundingClientRect();
  471.     const w = rect.width, h = rect.height;
  472.     const pad = 18;
  473.     const left = pad+4, right = w-pad-4, top = pad, bottom = h-pad;
  474.     const innerW = right-left, innerH = bottom-top;

  476.     ctxP.clearRect(0,0,w,h);
  477.     ctxP.fillStyle = '#fff';
  478.     ctxP.fillRect(0,0,w,h);

  480.     // x 范围：以当前 θ 为中心 ±2π
  481.     const theta0 = deg2rad(state.theta);
  482.     const xMin = theta0 - 2*Math.PI;
  483.     const xMax = theta0 + 2*Math.PI;

  485.     // y 范围
  486.     const yMax = (state.func==='tan') ? 3 : 1.2;
  487.     const yMin = -yMax;

  489.     // 映射
  490.     const sx = t => left + (t - xMin) / (xMax - xMin) * innerW;
  491.     const sy = y => bottom - (y - yMin) / (yMax - yMin) * innerH;

  493.     // 网格
  494.     if (state.showGrid){
  495.       ctxP.save();
  496.       ctxP.strokeStyle = getVar('--grid') || '#ececec';
  497.       ctxP.lineWidth = 1;

  499.       // 竖向网格：每 π/6
  500.       const stepMinor = Math.PI/6;
  501.       const sMin = Math.ceil(xMin/stepMinor);
  502.       const sMax = Math.floor(xMax/stepMinor);
  503.       ctxP.beginPath();
  504.       for(let k=sMin; k<=sMax; k++){
  505.         const x = sx(k*stepMinor);
  506.         ctxP.moveTo(x, top); ctxP.lineTo(x, bottom);
  507.       }
  508.       ctxP.stroke();

  510.       // 横向网格
  511.       ctxP.beginPath();
  512.       if (state.func==='tan'){
  513.         for (let v=-3; v<=3; v++){
  514.           const y = sy(v);
  515.           ctxP.moveTo(left, y); ctxP.lineTo(right, y);
  516.         }
  517.       }else{
  518.         const ys = [-1,-0.5,0,0.5,1];
  519.         ys.forEach(v=>{ const y=sy(v); ctxP.moveTo(left,y); ctxP.lineTo(right,y); });
  520.       }
  521.       ctxP.stroke();
  522.       ctxP.restore();
  523.     }

  525.     // 坐标轴 + 箭头
  526.     const axesColor = getVar('--axes') || '#333';
  527.     ctxP.save();
  528.     ctxP.strokeStyle = axesColor;
  529.     ctxP.lineWidth = 1.6;

  531.     const y0 = sy(0);
  532.     ctxP.beginPath(); ctxP.moveTo(left, y0); ctxP.lineTo(right, y0); ctxP.stroke();
  533.     drawArrow(ctxP, right, y0, 'right', axesColor);

  535.     if (xMin < 0 && xMax > 0){
  536.       const x0 = sx(0);
  537.       ctxP.beginPath(); ctxP.moveTo(x0, top); ctxP.lineTo(x0, bottom); ctxP.stroke();
  538.       drawArrow(ctxP, x0, top, 'up', axesColor);
  539.     }
  540.     ctxP.restore();

  542.     // 刻度与标签（x 主：π/2；次：π/6）
  543.     ctxP.save();
  544.     ctxP.fillStyle = '#445';
  545.     ctxP.strokeStyle = '#8b98a8';
  546.     ctxP.font = '12px system-ui, -apple-system, Segoe UI, Roboto';

  548.     const stepMajor = Math.PI/2, stepMinor = Math.PI/6;
  549.     const kMinM = Math.ceil(xMin/stepMinor), kMaxM = Math.floor(xMax/stepMinor);
  550.     for(let k=kMinM; k<=kMaxM; k++){
  551.       const X = sx(k*stepMinor);
  552.       const isMajor = (k % 3 === 0);
  553.       const len = isMajor ? 7 : 4;
  554.       ctxP.beginPath(); ctxP.moveTo(X, y0-len); ctxP.lineTo(X, y0+len); ctxP.stroke();
  555.     }
  556.     // 主刻度标签（π/2 倍数）
  557.     const kMin = Math.ceil(xMin/stepMajor), kMax = Math.floor(xMax/stepMajor);
  558.     ctxP.textAlign = 'center'; ctxP.textBaseline = 'top';
  559.     for(let k=kMin; k<=kMax; k++){
  560.       ctxP.fillText(piLabelFromK(k), sx(k*stepMajor), y0 + 8);
  561.     }
  562.     ctxP.textAlign = 'right'; ctxP.textBaseline = 'top';
  563.     ctxP.fillText('θ', right - 6, y0 + 8);

  565.     // y 刻度与标签
  566.     const yTicks = (state.func==='tan') ? [-3,-2,-1,0,1,2,3] : [-1,-0.5,0,0.5,1];
  567.     const xForTicks = (xMin < 0 && xMax > 0) ? sx(0) : left;
  568.     ctxP.textAlign = 'right'; ctxP.textBaseline = 'middle';
  569.     yTicks.forEach(v=>{
  570.       const Y = sy(v);
  571.       const len = (Math.abs(v % 1) < 1e-9) ? 7 : 4;
  572.       ctxP.beginPath(); ctxP.moveTo(xForTicks-len, Y); ctxP.lineTo(xForTicks+len, Y); ctxP.stroke();
  573.       ctxP.fillText(String(v), xForTicks - 8, Y);
  574.     });
  575.     ctxP.textAlign = 'left'; ctxP.textBaseline = 'bottom';
  576.     const yName = state.func + 'θ';
  577.     const xAxisForName = (xMin < 0 && xMax > 0) ? sx(0) + 6 : left + 6;
  578.     ctxP.fillText(yName, xAxisForName, top + 14);
  579.     ctxP.restore();

  581.     // tan 渐近线
  582.     if (state.func==='tan'){
  583.       ctxP.save();
  584.       ctxP.setLineDash([6,6]);
  585.       ctxP.strokeStyle = '#f1a47f';
  586.       ctxP.lineWidth = 1.2;
  587.       const step = Math.PI;
  588.       const start = Math.ceil((xMin - Math.PI/2)/step)*step + Math.PI/2;
  589.       for (let x = start; x <= xMax; x += step){
  590.         const X = sx(x);
  591.         ctxP.beginPath(); ctxP.moveTo(X, top); ctxP.lineTo(X, bottom); ctxP.stroke();
  592.       }
  593.       ctxP.restore();
  594.     }

  596.     // 曲线
  597.     ctxP.save();
  598.     ctxP.strokeStyle = colorFor(state.func);
  599.     ctxP.lineWidth = 2;

  601.     const fn = (t)=>{
  602.       if (state.func==='cos') return Math.cos(t);
  603.       if (state.func==='sin') return Math.sin(t);
  604.       const c = Math.cos(t);
  605.       if (Math.abs(c) < 1e-6) return Infinity;
  606.       return Math.tan(t);
  607.     };

  609.     const samples = Math.max(240, Math.floor(innerW));
  610.     let first = true;
  611.     let lastY = null;
  612.     ctxP.beginPath();
  613.     for(let i=0;i<=samples;i++){
  614.       const t = xMin + (i/samples)*(xMax-xMin);
  615.       let y = fn(t);
  616.       if (state.func==='tan'){
  617.         if (!isFinite(y) || Math.abs(Math.cos(t))<0.015){ lastY=null; first=true; continue; }
  618.         y = Math.max(-3, Math.min(3, y));
  619.       }
  620.       const X = sx(t), Y = sy(y);
  621.       if (first){ ctxP.moveTo(X, Y); first = false; }
  622.       else{
  623.         if (state.func==='tan' && lastY !== null && Math.abs(Y - lastY) > innerH*0.5){
  624.           ctxP.moveTo(X, Y);
  625.         }else ctxP.lineTo(X, Y);
  626.       }
  627.       lastY = Y;
  628.     }
  629.     ctxP.stroke();
  630.     ctxP.restore();

  632.     // 当前 θ 的标记
  633.     const fx = fn(theta0);
  634.     const X0 = sx(theta0);
  635.     if (state.showAnnotations){
  636.       ctxP.save();
  637.       ctxP.setLineDash([6,4]);
  638.       ctxP.strokeStyle = '#999';
  639.       ctxP.beginPath(); ctxP.moveTo(X0, top); ctxP.lineTo(X0, bottom); ctxP.stroke();
  640.       ctxP.restore();
  641.     }
  642.     if (isFinite(fx) && !(state.func==='tan' && Math.abs(Math.cos(theta0))<1e-6)){
  643.       const Y0 = sy(Math.max(-3, Math.min(3, fx)));
  644.       ctxP.beginPath();
  645.       ctxP.arc(X0, Y0, 5, 0, Math.PI*2);
  646.       ctxP.fillStyle = getVar('--point');
  647.       ctxP.strokeStyle = '#fff';
  648.       ctxP.lineWidth = 2;
  649.       ctxP.fill(); ctxP.stroke();
  650.     }
  651.   }

  653.   // π 标签：t = k*(π/2) 的文本
  654.   const gcd = (a,b)=> b===0 ? Math.abs(a) : gcd(b, a % b);
  655.   function piLabelFromK(k){
  656.     if (k === 0) return '0';
  657.     const g = gcd(Math.abs(k), 2);
  658.     const num = k / g;
  659.     const den = 2 / g;
  660.     const s = (num === 1) ? '' : (num === -1 ? '-' : String(num));
  661.     return s + 'π' + (den === 1 ? '' : '/' + den);
  662.   }

  664.   // 画箭头
  665.   function drawArrow(ctx, x, y, dir, color){
  666.     ctx.save();
  667.     ctx.fillStyle = color || '#333';
  668.     const L = 10, W = 6;
  669.     ctx.beginPath();
  670.     if (dir === 'right'){
  671.       ctx.moveTo(x, y);
  672.       ctx.lineTo(x - L, y - W/2);
  673.       ctx.lineTo(x - L, y + W/2);
  674.     }else if (dir === 'up'){
  675.       ctx.moveTo(x, y);
  676.       ctx.lineTo(x - W/2, y + L);
  677.       ctx.lineTo(x + W/2, y + L);
  678.     }
  679.     ctx.closePath();
  680.     ctx.fill();
  681.     ctx.restore();
  682.   }

  684.   function drawAll(){
  685.     drawCircle();
  686.     drawPlot();
  687.   }

  689.   // 重置
  690.   btnReset.addEventListener('click', ()=>{
  691.     state.theta = 0;
  692.     thetaRange.value = 0;
  693.     state.func = 'cos';
  694.     radiosFunc.forEach(r=> r.checked = (r.value==='cos'));
  695.     state.unit = 'deg';
  696.     radiosUnit.forEach(r=> r.checked = (r.value==='deg'));
  697.     state.showGrid = true;  chkGrid.checked = true;
  698.     state.showAnnotations = true; chkAnno.checked = true;
  699.     syncUI();
  700.     drawAll();
  701.   });

  703.   // 下载 PNG
  704.   btnSave.addEventListener('click', ()=>{
  705.     drawAll();

  707.     const cw = circle.getBoundingClientRect().width;
  708.     const ch = circle.getBoundingClientRect().height;
  709.     const pw = plot.getBoundingClientRect().width;
  710.     const ph = plot.getBoundingClientRect().height;

  712.     const W = Math.max(cw, pw);
  713.     const H = ch + 10 + ph;

  715.     const off = document.createElement('canvas');
  716.     off.width = W; off.height = H;
  717.     const g = off.getContext('2d');
  718.     g.fillStyle = '#fff'; g.fillRect(0,0,W,H);

  720.     const cImg = new Image();
  721.     const pImg = new Image();
  722.     const once = (img, src) => new Promise(res => { img.onload = res; img.src = src; });
  723.     Promise.all([
  724.       once(cImg, circle.toDataURL('image/png')),
  725.       once(pImg, plot.toDataURL('image/png'))
  726.     ]).then(()=>{
  727.       const cx = (W - cw)/2;
  728.       const px = (W - pw)/2;
  729.       g.drawImage(cImg, cx, 0, cw, ch);
  730.       g.drawImage(pImg, px, ch + 10, pw, ph);

  732.       const a = document.createElement('a');
  733.       a.download = `trig_${state.func}_theta${state.theta.toFixed(1)}.png`;
  734.       a.href = off.toDataURL('image/png');
  735.       a.click();
  736.     });
  737.   });

  739.   // 启动
  740.   resizeAll();
  741.   syncUI();
  742.   drawAll();
  743. })();
  744. </script>
  745. </body>
  746. </html>
复制代码



评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +5 C币 +5 收起 理由
小甲鱼 + 5 + 5 + 5 + 5 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

BrendanEich
发表于 3 天前 | 显示全部楼层
三角函数可视化工具说明


这是一个基于Canvas的三角函数可视化工具，支持通过鼠标交互查看单位圆与三角函数图像的关系。下面是完整实现代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>三角函数可视化</title>
  7.     <style>
  8.         :root {
  9.             --bg: #f7ebc5;
  10.             --panel: #ffffff;
  11.             --ink: #222;
  12.             --grid: #ececec;
  13.             --axes: #333;
  14.             --cos: #1f6afe;
  15.             --sin: #1fbf6b;
  16.             --tan: #ff6a3d;
  17.             --point: #e03131;
  18.             --shadow: 0 6px 18px rgba(0,0,0,.08);
  19.             --radius: 12px;
  20.         }
  21.         * { box-sizing: border-box; }
  22.         body {
  23.             margin: 0;
  24.             background: var(--bg);
  25.             color: var(--ink);
  26.             font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans", Arial, sans-serif;
  27.         }
  28.         .app {
  29.             min-height: 100vh;
  30.             padding: 14px;
  31.             display: grid;
  32.             grid-template-columns: 280px 1fr 240px;
  33.             grid-template-rows: auto 1fr;
  34.             gap: 14px;
  35.         }
  36.         @media (max-width: 1080px) {
  37.             .app {
  38.                 grid-template-columns: 1fr;
  39.                 grid-template-rows: auto auto auto;
  40.             }
  41.         }
  42.         .card {
  43.             background: var(--panel);
  44.             border-radius: var(--radius);
  45.             box-shadow: var(--shadow);
  46.             padding: 12px;
  47.         }
  48.         .panel-left { grid-column: 1; grid-row: 1/span 2; }
  49.         .center-top { grid-column: 2; grid-row: 1; }
  50.         .center-bottom { grid-column: 2; grid-row: 2; }
  51.         .panel-right { grid-column: 3; grid-row: 1/span 2; }
  52.         @media (max-width:1080px) {
  53.             .panel-left { grid-column: 1; grid-row: auto; }
  54.             .center-top { grid-column: 1; }
  55.             .center-bottom { grid-column: 1; }
  56.             .panel-right { grid-column: 1; }
  57.         }

  59.         h3 { margin: 6px 0 10px; font-size: 16px; }
  60.         .kv { display: grid; grid-template-columns: 88px 1fr; gap: 6px 8px; align-items: center; }
  61.         .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

  63.         .canvas-wrap { position: relative; width: 100%; aspect-ratio: 1/1; min-height: 260px; }
  64.         .plot-wrap { position: relative; width: 100%; aspect-ratio: 5/2; min-height: 240px; }
  65.         canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 8px; background: #fff; }

  67.         .ctrls { display: grid; gap: 10px; }
  68.         .ctrls .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  69.         label { user-select: none; }
  70.         input { width: 100%; }
  71.         button { padding: 8px 12px; border-radius: 10px; border: 1px solid #d6dde4; background: #fff; cursor: pointer; }
  72.         button.primary { background: linear-gradient(180deg, #ffd27d, #ff9f1a); color: #222; border: none; }
  73.     </style>
  74. </head>
  75. <body>
  76.     <div class="app">
  77.         <!-- 左侧信息面板 -->
  78.         <div class="card panel-left">
  79.             <h3>值</h3>
  80.             <div class="kv">
  81.                 <div>角</div>
  82.                 <div id="angleRead" class="mono">0.0°</div>
  83.                 <div>(x, y)</div>
  84.                 <div id="xyRead" class="mono">(1.000, 0.000)</div>
  85.                 <div id="exprName">cosθ =</div>
  86.                 <div id="exprVal" class="mono">x / 1 = 1.000</div>
  87.             </div>
  88.         </div>

  90.         <!-- 中间上方：单位圆 -->
  91.         <div class="card center-top">
  92.             <div class="canvas-wrap">
  93.                 <canvas id="circle"></canvas>
  94.             </div>
  95.         </div>

  97.         <!-- 中间下方：三角函数图像 -->
  98.         <div class="card center-bottom">
  99.             <div class="plot-wrap">
  100.                 <canvas id="plot"></canvas>
  101.             </div>
  102.         </div>

  104.         <!-- 右侧控制面板 -->
  105.         <div class="card panel-right">
  106.             <h3>显示</h3>
  107.             <div class="ctrls">
  108.                 <div class="row">
  109.                     <label><input type="radio" name="func" value="cos" checked> cos</label>
  110.                     <label><input type="radio" name="func" value="sin"> sin</label>
  111.                     <label><input type="radio" name="func" value="tan"> tan</label>
  112.                 </div>
  113.                 <div class="row">
  114.                     <label><input type="radio" name="unit" value="deg" checked> 度</label>
  115.                     <label><input type="radio" name="unit" value="rad"> 弧度</label>
  116.                 </div>
  117.                 <div class="row">
  118.                     <label><input type="checkbox" id="grid" checked> 网格</label>
  119.                     <label><input type="checkbox" id="annotations" checked> 标识</label>
  120.                 </div>
  121.                 <div class="row">
  122.                     <label for="thetaRange">角度</label>
  123.                     <span id="thetaLabel">0°</span>
  124.                 </div>
  125.                 <input type="range" id="thetaRange" min="-720" max="720" value="0" step="0.1">
  126.                 <div class="row">
  127.                     <button id="reset">重置</button>
  128.                     <button id="save" class="primary">下载 PNG</button>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>

  134.     <script>
  135.         (() => {
  136.             // 视角：单位圆视图
  137.             const VIEW_RANGE = 2;
  138.             const GRID_STEP = 0.5;
  139.             const MARGIN = 18;

  141.             // 状态
  142.             const state = {
  143.                 theta: 0,            // 角度（度），可达 ±720°
  144.                 func: 'cos',
  145.                 unit: 'deg',
  146.                 showGrid: true,
  147.                 showAnnotations: true
  148.             };

  150.             // DOM
  151.             const circle = document.getElementById('circle');
  152.             const plot = document.getElementById('plot');
  153.             const ctxC = circle.getContext('2d');
  154.             const ctxP = plot.getContext('2d');

  156.             const thetaRange = document.getElementById('thetaRange');
  157.             const thetaLabel = document.getElementById('thetaLabel');
  158.             const angleRead = document.getElementById('angleRead');
  159.             const xyRead = document.getElementById('xyRead');
  160.             const exprName = document.getElementById('exprName');
  161.             const exprVal = document.getElementById('exprVal');

  163.             const radiosFunc = document.querySelectorAll('input[name="func"]');
  164.             const radiosUnit = document.querySelectorAll('input[name="unit"]');
  165.             const chkGrid   = document.getElementById('grid');
  166.             const chkAnno   = document.getElementById('annotations');

  168.             const btnReset = document.getElementById('reset');
  169.             const btnSave  = document.getElementById('save');

  171.             // 工具
  172.             const deg2rad = d => d * Math.PI / 180;
  173.             const rad2deg = r => r * 180 / Math.PI;
  174.             const clamp = (v,min,max)=>Math.min(max,Math.max(min,v));
  175.             const fmt = n => {
  176.                 if (!isFinite(n)) return '—';
  177.                 const near0 = Math.abs(n) < 5e-4 ? 0 : n;
  178.                 return near0.toFixed(3);
  179.             };
  180.             const getVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  181.             const colorFor = f => f==='cos' ? getVar('--cos') : (f==='sin' ? getVar('--sin') : getVar('--tan'));

  183.             // 自适应画布
  184.             function fitCanvas(canvas, ctx){
  185.                 const rect = canvas.getBoundingClientRect();
  186.                 const dpr = Math.max(1, window.devicePixelRatio || 1);
  187.                 canvas.width = Math.floor(rect.width * dpr);
  188.                 canvas.height = Math.floor(rect.height * dpr);
  189.                 ctx.setTransform(1,0,0,1,0,0);
  190.                 ctx.scale(dpr, dpr);
  191.             }
  192.             function resizeAll(){
  193.                 fitCanvas(circle, ctxC);
  194.                 fitCanvas(plot, ctxP);
  195.                 drawAll();
  196.             }
  197.             window.addEventListener('resize', resizeAll, {passive:true});

  199.             // 角度滑块
  200.             thetaRange.addEventListener('input', e=>{
  201.                 state.theta = +e.target.value;
  202.                 syncUI();
  203.                 drawAll();
  204.             });

  206.             // 函数选择
  207.             radiosFunc.forEach(r=>r.addEventListener('change', e=>{
  208.                 if(e.target.checked){ state.func = e.target.value; drawAll(); syncUI(); }
  209.             }));

  211.             // 单位选择
  212.             radiosUnit.forEach(r=>r.addEventListener('change', e=>{
  213.                 if(e.target.checked){ state.unit = e.target.value; syncUI(); drawAll(); }
  214.             }));

  216.             // 选项
  217.             chkGrid.addEventListener('change', e=>{ state.showGrid = e.target.checked; drawAll(); });
  218.             chkAnno.addEventListener('change', e=>{ state.showAnnotations = e.target.checked; drawAll(); });

  220.             // 拖动单位圆上的红点（角度解包，支持连续累计到 ±720°）
  221.             (function enableCircleDrag(){
  222.                 let dragging = false;
  223.                 let lastRawDeg = 0; // 上一帧 atan2 的原始角（-180,180]

  225.                 function rawDegFromEvent(ev){
  226.                     const rect = circle.getBoundingClientRect();
  227.                     const cx = rect.width/2, cy = rect.height/2;
  228.                     const x = ev.clientX - (rect.left + cx);
  229.                     const y = ev.clientY - (rect.top + cy);
  230.                     return rad2deg(Math.atan2(-y, x));
  231.                 }

  233.                 function onMove(ev){
  234.                     if (!dragging) return;
  235.                     const raw = rawDegFromEvent(ev);
  236.                     let delta = raw - lastRawDeg;
  237.                     // 解包到最短角差（避免 180<->-180 跳变）
  238.                     if (delta > 180) delta -= 360;
  239.                     else if (delta < -180) delta += 360;

  241.                     state.theta = clamp(state.theta + delta, -720, 720);
  242.                     lastRawDeg = raw;

  244.                     thetaRange.value = state.theta;
  245.                     syncUI();
  246.                     drawAll();
  247.                 }

  249.                 circle.addEventListener('pointerdown', ev=>{
  250.                     dragging = true;
  251.                     circle.setPointerCapture(ev.pointerId);
  252.                     lastRawDeg = rawDegFromEvent(ev);
  253.                 });
  254.                 circle.addEventListener('pointermove', onMove);
  255.                 circle.addEventListener('pointerup',   ()=> dragging = false);
  256.                 circle.addEventListener('pointercancel',()=> dragging = false);
  257.             })();

  259.             // 文本 UI
  260.             function syncUI(){
  261.                 const deg = state.theta;
  262.                 const rad = deg2rad(deg);
  263.                 thetaLabel.textContent = `${deg.toFixed(1)}°`;
  264.                 angleRead.textContent = state.unit==='deg' ? `${deg.toFixed(1)}°` : `${fmt(rad)} rad`;

  266.                 const x = Math.cos(rad), y = Math.sin(rad);
  267.                 xyRead.textContent = `(${fmt(x)}, ${fmt(y)})`;

  269.                 let name = state.func + 'θ =';
  270.                 let expr;
  271.                 if (state.func === 'cos') expr = `x / 1 = ${fmt(x)}`;
  272.                 else if (state.func === 'sin') expr = `y / 1 = ${fmt(y)}`;
  273.                 else expr = (Math.abs(Math.cos(rad)) < 1e-6) ? '未定义' : `y / x = ${fmt(Math.tan(rad))}`;
  274.                 exprName.textContent = name;
  275.                 exprVal.textContent = expr;
  276.             }

  278.             // 绘制单位圆（半径=1，坐标补全 + 多圈角度弧）
  279.             function drawCircle(){
  280.                 const rect = circle.getBoundingClientRect();
  281.                 const w = rect.width, h = rect.height;
  282.                 const cx = w/2, cy = h/2;

  284.                 // 1 单位像素
  285.                 const unitPx = (Math.min(w,h) - 2*MARGIN) / (2*VIEW_RANGE);
  286.                 const sx = x => cx + x * unitPx;
  287.                 const sy = y => cy - y * unitPx;

  289.                 // 背景
  290.                 ctxC.clearRect(0,0,w,h);
  291.                 ctxC.fillStyle = '#ffffff';
  292.                 ctxC.fillRect(0,0,w,h);

  294.                 // 网格
  295.                 if (state.showGrid){
  296.                     ctxC.save();
  297.                     ctxC.strokeStyle = '#f3f3f3';
  298.                     ctxC.lineWidth = 1;
  299.                     ctxC.beginPath();
  300.                     for(let x = -VIEW_RANGE; x <= VIEW_RANGE; x += GRID_STEP) {
  301.                         ctxC.moveTo(sx(x), sy(-VIEW_RANGE));
  302.                         ctxC.lineTo(sx(x), sy(VIEW_RANGE));
  303.                     }
  304.                     for(let y = -VIEW_RANGE; y <= VIEW_RANGE; y += GRID_STEP) {
  305.                         ctxC.moveTo(sx(-VIEW_RANGE), sy(y));
  306.                         ctxC.lineTo(sx(VIEW_RANGE), sy(y));
  307.                     }
  308.                     ctxC.stroke();
  309.                     ctxC.restore();
  310.                 }

  312.                 // 坐标轴
  313.                 ctxC.save();
  314.                 ctxC.strokeStyle = getVar('--axes');
  315.                 ctxC.lineWidth = 2;
  316.                 ctxC.beginPath();
  317.                 ctxC.moveTo(sx(-VIEW_RANGE), sy(0));
  318.                 ctxC.lineTo(sx(VIEW_RANGE), sy(0));
  319.                 ctxC.moveTo(sx(0), sy(-VIEW_RANGE));
  320.                 ctxC.lineTo(sx(0), sy(VIEW_RANGE));
  321.                 ctxC.stroke();
  322.                 ctxC.restore();

  324.                 // 单位圆
  325.                 ctxC.save();
  326.                 ctxC.strokeStyle = '#999';
  327.                 ctxC.lineWidth = 2;
  328.                 ctxC.beginPath();
  329.                 ctxC.arc(cx, cy, unitPx, 0, Math.PI*2);
  330.                 ctxC.stroke();
  331.                 ctxC.restore();

  333.                 // 角度弧（多圈）
  334.                 const rad = deg2rad(state.theta);
  335.                 const turns = Math.floor(state.theta / 360);
  336.                 const remainder = state.theta % 360;
  337.                 const remainderRad = deg2rad(remainder);

  339.                 // 绘制多圈弧线
  340.                 if (turns !== 0) {
  341.                     ctxC.save();
  342.                     ctxC.strokeStyle = '#ff9f1a80';
  343.                     ctxC.lineWidth = 3;
  344.                     ctxC.beginPath();
  345.                     ctxC.arc(cx, cy, unitPx*0.8, 0, deg2rad(state.theta), state.theta < 0);
  346.                     ctxC.stroke();
  347.                     ctxC.restore();
  348.                 }

  350.                 // 当前角度弧
  351.                 ctxC.save();
  352.                 ctxC.strokeStyle = '#ff9f1a';
  353.                 ctxC.lineWidth = 3;
  354.                 ctxC.beginPath();
  355.                 ctxC.arc(cx, cy, unitPx*0.9, 0, remainderRad, remainder < 0);
  356.                 ctxC.stroke();
  357.                 ctxC.restore();

  359.                 // 角度线
  360.                 ctxC.save();
  361.                 ctxC.strokeStyle = '#ff9f1a';
  362.                 ctxC.lineWidth = 2;
  363.                 ctxC.beginPath();
  364.                 ctxC.moveTo(cx, cy);
  365.                 ctxC.lineTo(sx(Math.cos(remainderRad)), sy(Math.sin(remainderRad)));
  366.                 ctxC.stroke();
  367.                 ctxC.restore();

  369.                 // 当前点
  370.                 ctxC.save();
  371.                 ctxC.fillStyle = getVar('--point');
  372.                 ctxC.beginPath();
  373.                 ctxC.arc(sx(Math.cos(rad)), sy(Math.sin(rad)), 6, 0, Math.PI*2);
  374.                 ctxC.fill();
  375.                 ctxC.restore();

  377.                 // 标注
  378.                 if (state.showAnnotations) {
  379.                     ctxC.save();
  380.                     ctxC.fillStyle = getVar('--ink');
  381.                     ctxC.font = '12px sans-serif';
  382.                     ctxC.textAlign = 'center';
  383.                     ctxC.textBaseline = 'middle';
  384.                     ctxC.fillText('0°', sx(1.2), sy(0));
  385.                     ctxC.fillText('90°', sx(0), sy(1.2));
  386.                     ctxC.fillText('180°', sx(-1.2), sy(0));
  387.                     ctxC.fillText('270°', sx(0), sy(-1.2));
  388.                     ctxC.restore();
  389.                 }
  390.             }

  392.             // 绘制三角函数图像
  393.             function drawPlot(){
  394.                 const rect = plot.getBoundingClientRect();
  395.                 const w = rect.width, h = rect.height;
  396.                 const cx = w/2, cy = h/2;

  398.                 // 坐标变换
  399.                 const xToPx = x => cx + x * (w - 2*MARGIN) / (Math.PI * 4);
  400.                 const yToPx = y => cy - y * (h - 2*MARGIN) / 4;

  402.                 // 背景
  403.                 ctxP.clearRect(0,0,w,h);
  404.                 ctxP.fillStyle = '#ffffff';
  405.                 ctxP.fillRect(0,0,w,h);

  407.                 // 网格
  408.                 if (state.showGrid){
  409.                     ctxP.save();
  410.                     ctxP.strokeStyle = '#f3f3f3';
  411.                     ctxP.lineWidth = 1;
  412.                     ctxP.beginPath();
  413.                     // 垂直网格线（π/2间隔）
  414.                     for(let x = -2*Math.PI; x <= 2*Math.PI; x += Math.PI/2) {
  415.                         ctxP.moveTo(xToPx(x), yToPx(-2));
  416.                         ctxP.lineTo(xToPx(x), yToPx(2));
  417.                     }
  418.                     // 水平网格线（0.5间隔）
  419.                     for(let y = -2; y <= 2; y += 0.5) {
  420.                         ctxP.moveTo(xToPx(-2*Math.PI), yToPx(y));
  421.                         ctxP.lineTo(xToPx(2*Math.PI), yToPx(y));
  422.                     }
  423.                     ctxP.stroke();
  424.                     ctxP.restore();
  425.                 }

  427.                 // 坐标轴
  428.                 ctxP.save();
  429.                 ctxP.strokeStyle = getVar('--axes');
  430.                 ctxP.lineWidth = 2;
  431.                 ctxP.beginPath();
  432.                 ctxP.moveTo(xToPx(-2*Math.PI), yToPx(0));
  433.                 ctxP.lineTo(xToPx(2*Math.PI), yToPx(0));
  434.                 ctxP.moveTo(xToPx(0), yToPx(-2));
  435.                 ctxP.lineTo(xToPx(0), yToPx(2));
  436.                 ctxP.stroke();
  437.                 ctxP.restore();

  439.                 // 函数曲线
  440.                 const rad = deg2rad(state.theta);
  441.                 ctxP.save();
  442.                 ctxP.strokeStyle = colorFor(state.func);
  443.                 ctxP.lineWidth = 3;
  444.                 ctxP.beginPath();

  446.                 let firstPoint = true;
  447.                 for(let x = -2*Math.PI; x <= 2*Math.PI; x += 0.01) {
  448.                     let y;
  449.                     if (state.func === 'cos') y = Math.cos(x);
  450.                     else if (state.func === 'sin') y = Math.sin(x);
  451.                     else y = Math.tan(x);

  453.                     // 限制tan函数的值域显示
  454.                     if (state.func === 'tan' && Math.abs(y) > 10) {
  455.                         firstPoint = true;
  456.                         continue;
  457.                     }

  459.                     if (firstPoint) {
  460.                         ctxP.moveTo(xToPx(x), yToPx(y));
  461.                         firstPoint = false;
  462.                     } else {
  463.                         ctxP.lineTo(xToPx(x), yToPx(y));
  464.                     }
  465.                 }
  466.                 ctxP.stroke();
  467.                 ctxP.restore();

  469.                 // 当前角度标记
  470.                 ctxP.save();
  471.                 ctxP.fillStyle = getVar('--point');
  472.                 ctxP.beginPath();
  473.                 let yVal;
  474.                 if (state.func === 'cos') yVal = Math.cos(rad);
  475.                 else if (state.func === 'sin') yVal = Math.sin(rad);
  476.                 else yVal = Math.tan(rad);
  477.                
  478.                 if (isFinite(yVal)) {
  479.                     ctxP.arc(xToPx(rad), yToPx(yVal), 6, 0, Math.PI*2);
  480.                     ctxP.fill();
  481.                 }
  482.                 ctxP.restore();

  484.                 // 标注
  485.                 if (state.showAnnotations) {
  486.                     ctxP.save();
  487.                     ctxP.fillStyle = getVar('--ink');
  488.                     ctxP.font = '12px sans-serif';
  489.                     ctxP.textAlign = 'center';
  490.                     
  491.                     // x轴标注
  492.                     ctxP.textBaseline = 'top';
  493.                     for(let x = -2*Math.PI; x <= 2*Math.PI; x += Math.PI/2) {
  494.                         let label;
  495.                         if (x === 0) label = '0';
  496.                         else if (x === Math.PI/2) label = 'π/2';
  497.                         else if (x === Math.PI) label = 'π';
  498.                         else if (x === 3*Math.PI/2) label = '3π/2';
  499.                         else if (x === 2*Math.PI) label = '2π';
  500.                         else if (x === -Math.PI/2) label = '-π/2';
  501.                         else if (x === -Math.PI) label = '-π';
  502.                         else if (x === -3*Math.PI/2) label = '-3π/2';
  503.                         else if (x === -2*Math.PI) label = '-2π';
  504.                         else continue;
  505.                         
  506.                         ctxP.fillText(label, xToPx(x), yToPx(0) + 5);
  507.                     }
  508.                     
  509.                     // y轴标注
  510.                     ctxP.textAlign = 'right';
  511.                     ctxP.textBaseline = 'middle';
  512.                     for(let y = -2; y <= 2; y += 1) {
  513.                         if (y === 0) continue;
  514.                         ctxP.fillText(y.toString(), xToPx(0) - 5, yToPx(y));
  515.                     }
  516.                     ctxP.restore();
  517.                 }
  518.             }

  520.             function drawAll(){
  521.                 drawCircle();
  522.                 drawPlot();
  523.             }

  525.             // 重置
  526.             btnReset.addEventListener('click', ()=>{
  527.                 state.theta = 0;
  528.                 state.func = 'cos';
  529.                 state.unit = 'deg';
  530.                 thetaRange.value = 0;
  531.                 radiosFunc.forEach(r => r.checked = (r.value==='cos'));
  532.                 radiosUnit.forEach(r => r.checked = (r.value==='deg'));
  533.                 state.showGrid = true;  chkGrid.checked = true;
  534.                 state.showAnnotations = true; chkAnno.checked = true;
  535.                 syncUI();
  536.                 drawAll();
  537.             });

  539.             // 下载 PNG
  540.             btnSave.addEventListener('click', ()=>{
  541.                 drawAll();

  543.                 const cw = circle.getBoundingClientRect().width;
  544.                 const ch = circle.getBoundingClientRect().height;
  545.                 const pw = plot.getBoundingClientRect().width;
  546.                 const ph = plot.getBoundingClientRect().height;

  548.                 const W = Math.max(cw, pw);
  549.                 const H = ch + 10 + ph;

  551.                 const off = document.createElement('canvas');
  552.                 off.width = W; off.height = H;
  553.                 const g = off.getContext('2d');
  554.                 g.fillStyle = '#fff'; g.fillRect(0,0,W,H);

  556.                 const cImg = new Image();
  557.                 const pImg = new Image();
  558.                 const once = (img, src) => new Promise(res => { img.onload = res; img.src = src; });
  559.                 Promise.all([
  560.                     once(cImg, circle.toDataURL('image/png')),
  561.                     once(pImg, plot.toDataURL('image/png'))
  562.                 ]).then(()=>{
  563.                     const cx = (W - cw)/2;
  564.                     const px = (W - pw)/2;
  565.                     g.drawImage(cImg, cx, 0, cw, ch);
  566.                     g.drawImage(pImg, px, ch + 10, pw, ph);

  568.                     const a = document.createElement('a');
  569.                     a.download = `trig_${state.func}_theta${state.theta.toFixed(1)}.png`;
  570.                     a.href = off.toDataURL('image/png');
  571.                     a.click();
  572.                 });
  573.             });

  575.             // 启动
  576.             resizeAll();
  577.             syncUI();
  578.             drawAll();
  579.         })();
  580.     </script>
  581. </body>
  582. </html>
复制代码


使用说明：
  • 在单位圆上拖动可以改变角度（支持多圈旋转）
  • 使用滑块可以精确控制角度值（-720° 到 720°）
  • 选择不同的三角函数（cos/sin/tan）查看对应曲线
  • 可以切换角度显示单位（度/弧度）
  • 右侧面板可以控制网格和标识的显示
  • 支持重置和保存图片功能


这个工具可以帮助直观理解三角函数与单位圆的关系，适合数学学习和教学使用。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小甲鱼
发表于 前天 18:27 | 显示全部楼层
给力啊，继续加油！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-9-4 20:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表