{"id":4857,"date":"2026-03-21T11:18:45","date_gmt":"2026-03-21T03:18:45","guid":{"rendered":"https:\/\/aot-tek.com\/newAOT2019\/?p=4857"},"modified":"2026-03-21T11:18:45","modified_gmt":"2026-03-21T03:18:45","slug":"sun-yours%e7%a9%bf%e9%80%8f%e7%8e%87%e5%bd%a9%e8%89%b2%e5%85%89%e8%ad%9c%e8%83%8c%e6%99%af","status":"publish","type":"post","link":"https:\/\/aot-tek.com\/newAOT2019\/sun-yours%e7%a9%bf%e9%80%8f%e7%8e%87%e5%bd%a9%e8%89%b2%e5%85%89%e8%ad%9c%e8%83%8c%e6%99%af\/","title":{"rendered":"SUN YOURS\u7a7f\u900f\u7387\u5f69\u8272\u5149\u8b5c\u80cc\u666f"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>SUN YOURS Spectral Transmittance<\/title>\n<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: #f5f5f5;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    min-height: 100vh;\n    padding: 24px 12px;\n    font-family: Georgia, 'Times New Roman', serif;\n  }\n  .container {\n    background: #ffffff;\n    border: 1px solid #ddd;\n    border-radius: 12px;\n    padding: 28px 16px 20px 16px;\n    box-shadow: 0 2px 16px rgba(0,0,0,0.08);\n    width: 100%;\n    max-width: 860px;\n  }\n  h1 {\n    color: #1a1a2e;\n    font-size: 16px;\n    letter-spacing: 2px;\n    text-align: center;\n    margin-bottom: 4px;\n    font-weight: normal;\n    text-transform: uppercase;\n  }\n  .subtitle {\n    color: #888;\n    font-size: 12px;\n    text-align: center;\n    letter-spacing: 1px;\n    margin-bottom: 20px;\n  }\n  .canvas-wrap {\n    width: 100%;\n    position: relative;\n  }\n  canvas {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n  .legend {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 14px;\n    color: #555;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  .legend-line {\n    width: 32px;\n    height: 2.5px;\n    background: #1a1a2e;\n    border-radius: 2px;\n  }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n  <h1>Spectral Transmittance<\/h1>\n  <div class=\"subtitle\">380 nm \u2014 780 nm &nbsp;\u00b7&nbsp; SUN YOURS<\/div>\n  <div class=\"canvas-wrap\">\n    <canvas id=\"chart\"><\/canvas>\n  <\/div>\n  <div class=\"legend\">\n    <div class=\"legend-line\"><\/div>\n    SUN YOURS Transmittance\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  var canvas = document.getElementById('chart');\n  var ctx = canvas.getContext('2d');\n\n  var LW = 820, LH = 420;\n  canvas.width = LW;\n  canvas.height = LH;\n\n  var marginL = 58, marginR = 22, marginT = 18, marginB = 58;\n  var chartW = LW - marginL - marginR;\n  var chartH = LH - marginT - marginB;\n  var wMin = 380, wMax = 780;\n  var yMin = 0, yMax = 32;\n\n  var data = [\n    [380, 1.2], [390, 1.5], [400, 1.8], [410, 3.26], [420, 3.3],\n    [425, 3.4], [430, 3.5], [435, 4.07], [440, 4.2], [445, 4.3],\n    [450, 4.5], [455, 4.7], [460, 5.06], [465, 5.3], [470, 5.5],\n    [475, 5.63], [480, 6.31], [485, 6.8], [490, 7.3], [495, 7.6],\n    [500, 7.92], [505, 8.5], [510, 9.5], [515, 10.8], [520, 12.5],\n    [525, 14.2], [530, 16.0], [535, 17.8], [540, 19.5], [545, 21.0],\n    [550, 22.5], [555, 23.8], [560, 24.8], [565, 25.5], [570, 26.0],\n    [575, 26.5], [580, 26.9], [585, 27.2], [590, 27.5], [595, 27.8],\n    [600, 28.1], [605, 28.4], [610, 28.6], [615, 28.8], [620, 28.9],\n    [625, 29.0], [630, 29.1], [635, 29.2], [640, 29.2], [645, 29.1],\n    [650, 29.1], [655, 29.0], [660, 28.9], [665, 28.7], [670, 28.5],\n    [675, 28.3], [680, 28.0], [685, 27.8], [690, 27.6], [695, 27.5],\n    [700, 27.3], [710, 27.0], [720, 26.8], [730, 26.5], [740, 26.2],\n    [750, 25.8], [760, 25.4], [770, 25.0], [780, 24.0]\n  ];\n\n  function wToX(w) {\n    return marginL + ((w - wMin) \/ (wMax - wMin)) * chartW;\n  }\n  function tToY(t) {\n    return marginT + chartH - ((t - yMin) \/ (yMax - yMin)) * chartH;\n  }\n\n  function wavelengthToRGB(wl) {\n    var r, g, b;\n    if      (wl >= 380 && wl < 440) { r = -(wl-440)\/(440-380); g = 0; b = 1; }\n    else if (wl >= 440 && wl < 490) { r = 0; g = (wl-440)\/(490-440); b = 1; }\n    else if (wl >= 490 && wl < 510) { r = 0; g = 1; b = -(wl-510)\/(510-490); }\n    else if (wl >= 510 && wl < 580) { r = (wl-510)\/(580-510); g = 1; b = 0; }\n    else if (wl >= 580 && wl < 645) { r = 1; g = -(wl-645)\/(645-580); b = 0; }\n    else if (wl >= 645 && wl <= 780) { r = 1; g = 0; b = 0; }\n    else { r = 0; g = 0; b = 0; }\n\n    var factor;\n    if      (wl >= 380 && wl < 420) { factor = 0.3 + 0.7*(wl-380)\/40; }\n    else if (wl > 700 && wl <= 780)  { factor = 0.3 + 0.7*(780-wl)\/80; }\n    else { factor = 1.0; }\n\n    var R = Math.round(255 * Math.pow(r * factor, 0.85));\n    var G = Math.round(255 * Math.pow(g * factor, 0.85));\n    var B = Math.round(255 * Math.pow(b * factor, 0.85));\n    return [R, G, B];\n  }\n\n  function rgbStr(rgb, a) {\n    if (a !== undefined) {\n      return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + a + ')';\n    }\n    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';\n  }\n\n  function interpTransmittance(x) {\n    var w = wMin + ((x - marginL) \/ chartW) * (wMax - wMin);\n    for (var i = 0; i < data.length - 1; i++) {\n      if (w >= data[i][0] && w <= data[i+1][0]) {\n        var alpha = (w - data[i][0]) \/ (data[i+1][0] - data[i][0]);\n        return data[i][1] + alpha * (data[i+1][1] - data[i][1]);\n      }\n    }\n    return null;\n  }\n\n  \/\/ White background\n  ctx.fillStyle = '#ffffff';\n  ctx.fillRect(0, 0, LW, LH);\n\n  \/\/ Spectrum fill under curve\n  for (var px = marginL; px < marginL + chartW; px++) {\n    var t = interpTransmittance(px);\n    if (t === null) continue;\n    var wl = wMin + ((px - marginL) \/ chartW) * (wMax - wMin);\n    var rgb = wavelengthToRGB(wl);\n    var yTop = tToY(t);\n    var yBottom = tToY(0);\n\n    var grad = ctx.createLinearGradient(px, yTop, px, yBottom);\n    grad.addColorStop(0,   rgbStr(rgb, 0.72));\n    grad.addColorStop(0.6, rgbStr(rgb, 0.30));\n    grad.addColorStop(1,   rgbStr(rgb, 0.06));\n    ctx.fillStyle = grad;\n    ctx.fillRect(px, yTop, 1, yBottom - yTop);\n  }\n\n  \/\/ Spectrum strip below x-axis\n  var stripY = marginT + chartH + 8;\n  var stripH = 11;\n  for (var spx = 0; spx < chartW; spx++) {\n    var swl = wMin + (spx \/ chartW) * (wMax - wMin);\n    var srgb = wavelengthToRGB(swl);\n    ctx.fillStyle = rgbStr(srgb);\n    ctx.fillRect(marginL + spx, stripY, 1, stripH);\n  }\n\n  \/\/ Grid lines\n  ctx.strokeStyle = '#e0e0e8';\n  ctx.lineWidth = 1;\n\n  var yTicks = [0, 5, 10, 15, 20, 25, 30];\n  for (var yi = 0; yi < yTicks.length; yi++) {\n    var tv = yTicks[yi];\n    var yv = tToY(tv);\n    ctx.beginPath();\n    ctx.moveTo(marginL, yv);\n    ctx.lineTo(marginL + chartW, yv);\n    ctx.stroke();\n    ctx.fillStyle = '#444';\n    ctx.font = '12px Georgia';\n    ctx.textAlign = 'right';\n    ctx.fillText(tv, marginL - 8, yv + 4);\n  }\n\n  var xTickWl = [400, 450, 500, 550, 600, 650, 700, 750];\n  for (var xi = 0; xi < xTickWl.length; xi++) {\n    var xw = xTickWl[xi];\n    var xx = wToX(xw);\n    ctx.beginPath();\n    ctx.moveTo(xx, marginT);\n    ctx.lineTo(xx, marginT + chartH);\n    ctx.stroke();\n    ctx.fillStyle = '#444';\n    ctx.font = '12px Georgia';\n    ctx.textAlign = 'center';\n    ctx.fillText(xw, xx, marginT + chartH + 24);\n  }\n\n  \/\/ Axes\n  ctx.strokeStyle = '#aaa';\n  ctx.lineWidth = 1.5;\n  ctx.beginPath();\n  ctx.moveTo(marginL, marginT);\n  ctx.lineTo(marginL, marginT + chartH);\n  ctx.lineTo(marginL + chartW, marginT + chartH);\n  ctx.stroke();\n\n  \/\/ Axis labels\n  ctx.fillStyle = '#333';\n  ctx.font = '13px Georgia';\n  ctx.textAlign = 'center';\n  ctx.fillText('Wavelength (nm)', marginL + chartW \/ 2, LH - 6);\n\n  ctx.save();\n  ctx.translate(13, marginT + chartH \/ 2);\n  ctx.rotate(-Math.PI \/ 2);\n  ctx.textAlign = 'center';\n  ctx.fillText('Transmittance (%)', 0, 0);\n  ctx.restore();\n\n  \/\/ Draw curve (dark navy)\n  ctx.beginPath();\n  ctx.strokeStyle = '#1a1a2e';\n  ctx.lineWidth = 2.2;\n  ctx.lineJoin = 'round';\n  for (var di = 0; di < data.length; di++) {\n    var dx = wToX(data[di][0]);\n    var dy = tToY(data[di][1]);\n    if (di === 0) ctx.moveTo(dx, dy); else ctx.lineTo(dx, dy);\n  }\n  ctx.stroke();\n\n\n\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>SUN YOURS Spectral Transmittance Spectral Transmittance 380 nm \u2014 780 nm &nbsp;\u00b7&nbsp; SUN YOURS SUN YOURS Transmittance<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118],"tags":[119,120],"class_list":["post-4857","post","type-post","status-publish","format-standard","hentry","category-sun-yours","tag-sun-yours","tag-120"],"_links":{"self":[{"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/posts\/4857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/comments?post=4857"}],"version-history":[{"count":1,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/posts\/4857\/revisions"}],"predecessor-version":[{"id":4858,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/posts\/4857\/revisions\/4858"}],"wp:attachment":[{"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/media?parent=4857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/categories?post=4857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aot-tek.com\/newAOT2019\/wp-json\/wp\/v2\/tags?post=4857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}