<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>三角不等式动态演示：||x|-|a|| ≤ |x-a|</title><style>canvas{background:#f8f9fa;border:1px solid #ccc;display:block;margin:20px auto;}.controls{text-align:center;font-family:Arial,sans-serif;}input{width:300px;cursor:pointer;}p{font-size:18px;}.note{color:#555;font-size:14px;}</style></head><body><divclass="controls"><h3>📐 三角不等式：||x| - |a|| ≤ |x - a|</h3><p>a =<spanid="a_val">0</span> x =<spanid="x_val">0</span></p><p><spanstyle="color:red;">红色长度 = ||x| - |a|| =<spanid="d1">0</span></span><br><spanstyle="color:blue;">蓝色长度 = |x - a| =<spanid="d2">0</span></span><br><strong>✅ 红色 ≤ 蓝色 永远成立</strong></p><p><label>拖动 a 的值：</label><inputtype="range"id="a_slider"min="-5"max="5"step="0.1"value="2"></p><p><label>拖动 x 的值：</label><inputtype="range"id="x_slider"min="-5"max="5"step="0.1"value="-2"></p><pclass="note">💡 观察：当 a 和 x 在原点同侧时，红蓝长度相等；<br> 当 a 和 x 在原点异侧时，红色长度小于蓝色长度。</p></div><canvasid="canvas"width="800"height="300"></canvas><script>constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');constwidth=800,height=300;canvas.width=width;canvas.height=height;// 坐标映射：数轴范围 -6 到 6，画布 x 范围 100 到 700functiontoX(value){return100+(value+6)/12*600;}// 获取 DOM 元素constaSlider=document.getElementById('a_slider');constxSlider=document.getElementById('x_slider');constaValSpan=document.getElementById('a_val');constxValSpan=document.getElementById('x_val');constd1Span=document.getElementById('d1');constd2Span=document.getElementById('d2');functiondraw(){leta=parseFloat(aSlider.value);letx=parseFloat(xSlider.value);// 更新数值显示aValSpan.innerText=a.toFixed(2);xValSpan.innerText=x.toFixed(2);letabsA=Math.abs(a);letabsX=Math.abs(x);letd1=Math.abs(absX-absA);letd2=Math.abs(x-a);d1Span.innerText=d1.toFixed(3);d2Span.innerText=d2.toFixed(3);// 清空画布ctx.clearRect(0,0,width,height);// 绘制数轴ctx.beginPath();ctx.moveTo(50,height/2);ctx.lineTo(width-50,height/2);ctx.strokeStyle='#aaa';ctx.stroke();// 绘制刻度for(letval=-6;val<=6;val+=1){letxc=toX(val);ctx.beginPath();ctx.moveTo(xc,height/2-5);ctx.lineTo(xc,height/2+5);ctx.stroke();ctx.fillStyle='#333';ctx.fillText(val,xc-5,height/2-10);}// 原点标注ctx.fillStyle='black';ctx.fillText("0",toX(0)-5,height/2-10);// 画 a 点（蓝色）letax=toX(a);ctx.beginPath();ctx.arc(ax,height/2,8,0,2*Math.PI);ctx.fillStyle='blue';ctx.fill();ctx.fillStyle='white';ctx.font='bold 14px Arial';ctx.fillText("a",ax-4,height/2+4);// 画 x 点（红色）letxx=toX(x);ctx.beginPath();ctx.arc(xx,height/2,8,0,2*Math.PI);ctx.fillStyle='red';ctx.fill();ctx.fillStyle='white';ctx.fillText("x",xx-4,height/2+4);// 画 |a| 点（浅蓝色，位于正半轴）letabsAx=toX(absA);ctx.beginPath();ctx.arc(absAx,height/2-40,6,0,2*Math.PI);ctx.fillStyle='#66c2ff';ctx.fill();ctx.fillStyle='black';ctx.fillText("|a|",absAx-8,height/2-45);// 画 |x| 点（浅红色，位于正半轴）letabsXx=toX(absX);ctx.beginPath();ctx.arc(absXx,height/2-40,6,0,2*Math.PI);ctx.fillStyle='#ff9999';ctx.fill();ctx.fillStyle='black';ctx.fillText("|x|",absXx-8,height/2-45);// 绘制蓝色线段：a 到 x（实际距离）ctx.beginPath();ctx.moveTo(ax,height/2);ctx.lineTo(xx,height/2);ctx.strokeStyle='blue';ctx.lineWidth=3;ctx.stroke();// 绘制红色线段：|a| 到 |x|（绝对值距离）ctx.beginPath();ctx.moveTo(absAx,height/2-40);ctx.lineTo(absXx,height/2-40);ctx.strokeStyle='red';ctx.lineWidth=3;ctx.stroke();// 可选：从 a 和 x 到它们绝对值点的虚线（展示翻折效果）ctx.beginPath();ctx.moveTo(ax,height/2);ctx.lineTo(absAx,height/2-40);ctx.strokeStyle='gray';ctx.lineWidth=1;ctx.setLineDash([5,5]);ctx.stroke();ctx.beginPath();ctx.moveTo(xx,height/2);ctx.lineTo(absXx,height/2-40);ctx.stroke();ctx.setLineDash([]);// 恢复实线// 标注长度ctx.font='14px Arial';ctx.fillStyle='blue';letmidX=(ax+xx)/2;ctx.fillText("|x-a|",midX,height/2-15);ctx.fillStyle='red';letmidAbsX=(absAx+absXx)/2;ctx.fillText("||x|-|a||",midAbsX,height/2-55);// 额外文字提示比较if(d1<=d2){ctx.fillStyle='green';ctx.font='bold 16px Arial';ctx.fillText("✓ 不等式成立",width-150,50);}}aSlider.addEventListener('input',draw);xSlider.addEventListener('input',draw);draw();</script></body></html>
