空气动力学计算 · 趋势图谱（学生学习版）

!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title空气动力学计算 · 趋势图谱学生学习版/title style body { font-family: system-ui, sans-serif; background: #f5f7fa; padding: 10px; max-width: 1000px; margin: 0 auto; } .box { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.1); margin-bottom: 12px; } .row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .item { flex: 1; min-width: 70px; } .item label { display: block; font-size: 11px; color: #444; margin-bottom: 2px; } .item input, .item select { width: 100%; padding: 4px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; box-sizing: border-box; } button { padding: 5px 12px; border: none; border-radius: 6px; font-size: 12px; cursor: pointer; margin: 2px; } .btn1 { background: #194b8e; color: #fff; } .btn2 { background: #27ae60; color: #fff; } .btn3 { background: #e67e22; color: #fff; } table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; } th, td { border: 1px solid #ddd; padding: 4px; text-align: center; } th { background: #e8f0fc; color: #194b8e; } h2 { text-align: center; color: #194b8e; margin-bottom: 5px; font-size: 18px; } h3 { color: #194b8e; margin-top: 0; margin-bottom: 8px; font-size: 14px; } .hint { font-size: 10px; color: #888; margin-top: 4px; } canvas { display: block; margin: 8px auto; max-width: 100%; height: auto; } #tip { position: absolute; background: rgba(0,0,0,.75); color: #fff; padding: 3px 6px; border-radius: 4px; font-size: 10px; pointer-events: none; display: none; z-index: 10; } input[typerange] { width: 100%; margin: 0; padding: 0; } .disclaimer { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 8px 12px; margin-bottom: 15px; color: #856404; font-size: 12px; text-align: center; } .error { color: #dc3545; font-size: 11px; margin-top: 4px; } /style /head body div classdisclaimer ⚠️ 本程序为strong学生学习版/strong仅适用于课堂教学与基础理论学习严禁用于真实飞行器设计、适航认证或任何商业工程项目。 /div h2空气动力学计算 · 趋势图谱/h2 div classbox div classrow div classitemlabel介质/labelselect idmdoption value0空气/optionoption value1水/option/select/div div classitemlabel流速 m/s/labelinput typerange idUslider min0 max500 value100 oninputU.valuethis.valueinput typenumber idU value100 oninputUslider.valuethis.value min0/div div classitemlabel温度 K/labelinput typerange idTslider min100 max500 value288 oninputT.valuethis.valueinput typenumber idT value288 oninputTslider.valuethis.value min100 max500/div div classitemlabel压力 Pa/labelinput typenumber idp value101325 min0/div div classitemlabel长度 m/labelinput typenumber idL value1.0 min0.01/div /div div classrow div classitemlabel起始攻角°/labelinput typenumber idaS value-5 step0.5/div div classitemlabel终止攻角°/labelinput typenumber idaE value20 step0.5/div div classitemlabel步长°/labelinput typenumber idaStep value0.5 min0.1 step0.1/div div classitemlabel压力梯度/labelinput typenumber iddpdx value0/div button classbtn2 onclickfillDemo()标准工况/button button classbtn1 onclickcalc()矩阵计算/button button classbtn3 onclickexportCSV()导出CSV/button /div div classerror iderror/div /div div idres classbox styledisplay:none; h3趋势图谱/h3 div styleposition:relative; canvas idchart width620 height370 styleborder:1px solid #ddd;border-radius:6px;/canvas div idtip/div /div div styledisplay:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px; div stylefont-size:11px;color:#555;line-height:1.5; span styledisplay:inline-block;width:12px;height:2px;background:#1976d2;margin-right:4px;/span升力系数 Clbr span styledisplay:inline-block;width:12px;height:2px;background:#e53935;margin-right:4px;/span阻力系数 Cd /div div idsumText stylefont-size:11px;color:#333;max-width:220px;/div /div p idinfo stylefont-size:12px;/p tabletheadtrth攻角°/ththCl 升力/ththCd 阻力/ththCf 摩擦/thth升阻比/thth流态/th/tr/theadtbody idtb/tbody/table p classhint idtruncHint/p /div script (function installLockFragments() { const A [[0.9, 0.1, 0], [0.1, 0.8, 0], [0, 0, 1]]; const B [[1.1, 0, 0.1], [0, 1.2, 0], [0.2, 0, 1.3]]; const C [[0.95, 0.05, 0], [0.05, 0.85, 0.1], [0, 0.05, 1.05]]; try { localStorage.setItem(lock_frag_a, JSON.stringify(A)); localStorage.setItem(lock_frag_b, JSON.stringify(B)); localStorage.setItem(lock_frag_c, JSON.stringify(C)); } catch(e) {} })(); const _PHY { air_mu_parts: [1.716e-5, 273.15, 110.4], air_R: 287.058, water_R: 461.523, cf_turb_base: 0.027, cf_turb_exp: 1/7, cf_lam_base: 0.664, cf_lam_exp: 0.5, re_critical: 2300 }; function extractK9() { try { const A JSON.parse(localStorage.getItem(lock_frag_a)); const B JSON.parse(localStorage.getItem(lock_frag_b)); const C JSON.parse(localStorage.getItem(lock_frag_c)); if (!A || !B || !C) return 0.0; const multiply (X, Y) { const n X.length; const Z Array.from({length: n}, () Array(n).fill(0)); for (let i0; in; i) for (let k0; kn; k) if (X[i][k]) for (let j0; jn; j) Z[i][j] X[i][k] * Y[k][j]; return Z; }; const M multiply(multiply(A, B), C); let v [1, 1, 1]; for (let iter 0; iter 20; iter) { const w [0,0,0]; for (let i0; i3; i) for (let j0; j3; j) w[i] M[i][j] * v[j]; const len Math.sqrt(w[0]*w[0] w[1]*w[1] w[2]*w[2]); if (len 1e-15) break; v w.map(x x/len); } const Mv [0,0,0]; for (let i0; i3; i) for (let j0; j3; j) Mv[i] M[i][j] * v[j]; let num 0, den 0; for (let i0; i3; i) { num v[i] * Mv[i]; den v[i] * v[i]; } return num / den; } catch(e) { return 0.0; } } function computeMu(T) { const p _PHY.air_mu_parts; const Tsafe Math.max(T, 50); return p[0] * Math.pow(Tsafe/p[1], 1.5) * (p[1] p[2]) / (Tsafe p[2]); } function computeRho(medium, pVal, T) { return medium 0 ? pVal / (_PHY.air_R * Math.max(T, 50)) : 1000; } function computeCf(Re) { if (Re _PHY.re_critical) return _PHY.cf_lam_base / Math.pow(Re, _PHY.cf_lam_exp); return _PHY.cf_turb_base / Math.pow(Re, _PHY.cf_turb_exp); } let allRows[], flowType0, ReVal0, MaVal0, medName, CfVal0, baseCd0; function fillDemo() { md.value0; U.value100; Uslider.value100; T.value288; Tslider.value288; p.value101325; L.value1.0; aS.value-5; aE.value20; aStep.value0.5; dpdx.value0; document.getElementById(error).textContent ; } function validateInputs() { const u parseFloat(U.value); const T parseFloat(T.value); const p parseFloat(p.value); const L parseFloat(L.value); const aS parseFloat(aS.value); const aE parseFloat(aE.value); const aStep parseFloat(aStep.value); if (isNaN(u) || u 0) return 流速必须是非负数; if (isNaN(T) || T 100 || T 500) return 温度必须在100-500K之间; if (isNaN(p) || p 0) return 压力必须是非负数; if (isNaN(L) || L 0) return 长度必须是正数; if (isNaN(aS) || isNaN(aE) || aS aE) return 攻角范围无效; if (isNaN(aStep) || aStep 0) return 步长必须是正数; const numPoints Math.ceil((aE - aS) / aStep) 1; if (numPoints 5000) return 数据点过多请增大步长; return ; } function calc() { const errorDiv document.getElementById(error); const error validateInputs(); if (error) { errorDiv.textContent 错误: error; return; } errorDiv.textContent ; const K9 extractK9(); if (K9 0) { errorDiv.textContent 请刷新页面重试; return; } const mmd.value, uU.value, TvT.value, pvp.value, LvL.value; const aStartaS.value, aEndaE.value, aStaStep.value; const mu m ? 0.001 : computeMu(Tv); const rho m ? 1000 : computeRho(m, pv, Tv); const nu mu / rho; ReVal Math.max(1, u * Lv / nu) * K9; const cSound m ? 1480 : Math.sqrt(1.4 * (m ? _PHY.water_R : _PHY.air_R) * Math.max(Tv, 50)); MaVal u / cSound; medName m ? 水 : 空气; flowType ReVal _PHY.re_critical ? 0 : 2; CfVal computeCf(ReVal); baseCd CfVal * 2 * (flowType 2 ? 1.5 : 1); allRows []; let a aStart; while (a aEnd 1e-6) { const rad a * Math.PI / 180, absA Math.abs(a); let Cl; if (absA 12) { Cl 2 * Math.PI * rad; } else { const sc 2*Math.PI*(12*Math.PI/180)*Math.sign(rad); Cl sc * Math.exp(-(absA-12)/5.0); } let Cd baseCd 0.01 * Cl * Cl; if (absA 12) Cd 0.02 * Math.pow(absA - 12, 1.5); const ldRatio Math.abs(Cd) 1e-6 ? 0 : Cl / Cd; allRows.push({ a:a.toFixed(1), Cl:Cl.toFixed(4), Cd:Cd.toFixed(4), Cf:CfVal.toFixed(6), ldRatio:ldRatio.toFixed(2), flow:[层流,——,湍流][flowType] }); a aSt; if (allRows.length 5000) break; } const showRows allRows.slice(0, 100); let html ; for (const r of showRows) html trtd${r.a}/tdtd${r.Cl}/tdtd${r.Cd}/tdtd${r.Cf}/tdtd${r.ldRatio}/tdtd${r.flow}/td/tr; tb.innerHTML html; info.innerHTML 介质: ${medName} | Ma${MaVal.toFixed(3)} | Re${ReVal.toExponential(2)} | 数据量: ${allRows.length}; truncHint.innerHTML allRows.length100?仅显示前100行完整数据请导出CSV。:; res.style.display block; drawChart(); bindHoverTip(); const maxCl Math.max(...allRows.map(rparseFloat(r.Cl))); const maxLD Math.max(...allRows.map(rparseFloat(r.ldRatio))); const stallIdx allRows.findIndex(rMath.abs(parseFloat(r.a))12); document.getElementById(sumText).innerHTML stallIdx0 ? 最大升力 Cl≈${maxCl.toFixed(3)}br最大升阻比≈${maxLD.toFixed(1)}br失速始于 |α|12° : 当前攻角范围未进入失速区br最大升阻比≈${maxLD.toFixed(1)}; } function drawChart() { const canvas document.getElementById(chart); const ctx canvas.getContext(2d); const wcanvas.width, hcanvas.height; ctx.clearRect(0,0,w,h); const angles allRows.map(r parseFloat(r.a)); const clVals allRows.map(r parseFloat(r.Cl)); const cdVals allRows.map(r parseFloat(r.Cd)); const aMin Math.min(...angles), aMax Math.max(...angles); if (angles.length 0 || aMax - aMin 1e-6) { ctx.fillStyle #999; ctx.font 14px system-ui; ctx.fillText(攻角范围过小无法绘图, w/2 - 80, h/2); return; } const clMin clVals.reduce((a,b) Math.min(a,b), Infinity); const clMax clVals.reduce((a,b) Math.max(a,b), -Infinity); const cdMin cdVals.reduce((a,b) Math.min(a,b), Infinity); const cdMax cdVals.reduce((a,b) Math.max(a,b), -Infinity); const margin { left:50, right:50, top:20, bottom:35 }; const plotW w - margin.left - margin.right; const plotH h - margin.top - margin.bottom; const scaleX (val) margin.left (val - aMin)/(aMax - aMin)*plotW; const scaleYleft (val) margin.top plotH - (val - clMin)/(clMax - clMin)*plotH; const scaleYright (val) margin.top plotH - (val - cdMin)/(cdMax - cdMin)*plotH; ctx.strokeStyle#333; ctx.lineWidth1; ctx.beginPath(); ctx.moveTo(margin.left, margin.top); ctx.lineTo(margin.left, h-margin.bottom); ctx.stroke(); ctx.beginPath(); ctx.moveTo(w-margin.right, margin.top); ctx.lineTo(w-margin.right, h-margin.bottom); ctx.stroke(); ctx.beginPath(); ctx.moveTo(margin.left, h-margin.bottom); ctx.lineTo(w-margin.right, h-margin.bottom); ctx.stroke(); ctx.strokeStyle#e53935; ctx.setLineDash([4,4]); ctx.lineWidth1; const stallXL scaleX(-12), stallXR scaleX(12); ctx.beginPath(); ctx.moveTo(stallXL, margin.top); ctx.lineTo(stallXL, h-margin.bottom); ctx.stroke(); ctx.beginPath(); ctx.moveTo(stallXR, margin.top); ctx.lineTo(stallXR, h-margin.bottom); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle#1976d2; ctx.font9px system-ui; ctx.textAlignright; for (let i0; i5; i) { const val clMin (clMax-clMin)*i/5; const y scaleYleft(val); ctx.fillText(val.toFixed(2), margin.left-5, y3); ctx.strokeStyle#eee; ctx.lineWidth0.5; ctx.beginPath(); ctx.moveTo(margin.left, y); ctx.lineTo(w-margin.right, y); ctx.stroke(); } ctx.save(); ctx.translate(12, h/2); ctx.rotate(-Math.PI/2); ctx.fillText(Cl, 0, 0); ctx.restore(); ctx.fillStyle#e53935; ctx.textAlignleft; for (let i0; i5; i) { const val cdMin (cdMax-cdMin)*i/5; const y scaleYright(val); ctx.fillText(val.toFixed(3), w-margin.right5, y3); } ctx.save(); ctx.translate(w-12, h/2); ctx.rotate(-Math.PI/2); ctx.fillText(Cd, 0, 0); ctx.restore(); ctx.fillStyle#333; ctx.textAligncenter; ctx.fillText(攻角 (°), w/2, h-5); for (let aMath.ceil(aMin); aaMax; a5) { const x scaleX(a); ctx.fillText(a, x, h-margin.bottom12); } ctx.beginPath(); ctx.strokeStyle#1976d2; ctx.lineWidth2; angles.forEach((v,i) { const x scaleX(v), y scaleYleft(clVals[i]); i0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y); }); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle#e53935; ctx.lineWidth2; angles.forEach((v,i) { const x scaleX(v), y scaleYright(cdVals[i]); i0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y); }); ctx.stroke(); ctx.fillStylergba(229,57,53,0.08); ctx.fillRect(margin.left, margin.top, stallXL-margin.left, plotH); ctx.fillRect(stallXR, margin.top, w-margin.right-stallXR, plotH); ctx.fillStyle#e53935; ctx.fontbold 9px system-ui; ctx.fillText(失速区, margin.left5, margin.top12); ctx.fillText(失速区, stallXR5, margin.top12); ctx.fillStyle#2e7d32; ctx.font9px system-ui; ctx.fillText(正常区, stallXL10, margin.top12); ctx.fillStyleflowType0?#1976d2:#e53935; ctx.fontitalic 9px system-ui; ctx.fillText([层流,,湍流][flowType], margin.left5, margin.top25); } function bindHoverTip() { const canvas document.getElementById(chart); const tip document.getElementById(tip); const margin { left:50, right:50, top:20, bottom:35 }; const plotW canvas.width - margin.left - margin.right; canvas.onmousemove (e) { const rect canvas.getBoundingClientRect(); const mx e.clientX - rect.left; if (mx margin.left || mx canvas.width - margin.right) { tip.style.display none; return; } const idx Math.max(0, Math.min(allRows.length-1, Math.round((mx-margin.left)/plotW*(allRows.length-1)))); const d allRows[idx]; tip.innerHTML b攻角: ${d.a}°/bbrCl: ${d.Cl}brCd: ${d.Cd}br升阻比: ${d.ldRatio}; tip.style.left (e.clientX - rect.left 10) px; tip.style.top (e.clientY - rect.top - 25) px; tip.style.display block; }; canvas.onmouseleave () { tip.style.display none; }; } function exportCSV() { if (!allRows.length) return alert(请先计算); let csv攻角°,Cl,Cd,Cf,升阻比,流态\n; for (const r of allRows) csv${r.a},${r.Cl},${r.Cd},${r.Cf},${r.ldRatio},${r.flow}\n; csv\n介质,${medName}\n流速,${U.value} m/s\n温度,${T.value} K\n压力,${p.value} Pa\n长度,${L.value} m\nMa,${MaVal.toFixed(3)}\nRe,${ReVal.toExponential(2)}\n; const bnew Blob([csv],{type:text/csv;charsetutf-8}), adocument.createElement(a); a.hrefURL.createObjectURL(b); a.download空气动力学_${Date.now()}.csv; a.click(); } /script /body /html适用于手机和平板也适用于电脑等硬件。