Javascript ROY G BIV 线谱？

Posted 2023-02-25

【中文标题】Javascript ROY G BIV 线谱？

【英文标题】：Javascript ROY G BIV Line Spectrum?

【发布时间】：2014-06-28 20:01:34

【问题描述】：

我对 javascript 相当陌生，我想使用 html canvas 和 javascript 制作一个小线谱，以便稍后在单击按钮时对其进行动画处理以显示吸收线等，就像在化学中一样。我只是不确定纯javascript是否能够处理这个问题。谁能提供一些关于如何做到这一点的信息，或者这是否可能？如果需要，我很乐意提供更多信息。

编辑：这是我目前所拥有的，但我不知道为什么颜色渐变会在颜色变化的地方倾斜，并且需要调整颜色的宽度，以便它们沿矩形占据相等的数量。

HTML

<canvas id="spectralCanvas"  ></canvas>

JavaScript

function loadSpectralCanvas() 
var spectralCanvas = document.getElementById('spectralCanvas');
var spectralCtx = spectralCanvas.getContext('2d');
var backgroundCtx = spectralCanvas.getContext('2d');
spectralCtx.rect(0, 0, spectralCanvas.width, spectralCanvas.height / 2);

//Creates black underlay to represent absorption lines on the spectrum.
backgroundCtx.fillStyle = 'black';
backgroundCtx.fillRect(0, 0, spectralCanvas.width, spectralCanvas.height / 2);

//Creates the ROY G BIV line spectrum.
var gradient = spectralCtx.createLinearGradient(0, 0, spectralCanvas.width, spectralCanvas.height / 2);
gradient.addColorStop(0.14, '#882022'); //Red
gradient.addColorStop(0.28, '#E83B23'); //Orange
gradient.addColorStop(0.42, '#FFF101'); //Yellow
gradient.addColorStop(0.56, '#89C540'); //Green
gradient.addColorStop(0.70, '#1BBDC9'); //Blue
gradient.addColorStop(0.84, '#0279B9'); //Indigo
gradient.addColorStop(1.0, '#58235E'); //Violet
spectralCtx.fillStyle = gradient;
spectralCtx.fill();

loadSpectralCanvas();

JSFiddle

【问题讨论】：

如果“纯 JavaScript”做不到，那还能做什么？

我不知道，这就是问题的原因：P

【参考方案1】：

create gradient 函数的最后一个参数应该是 0，因为这会产生一个水平渐变来拉伸画布的宽度。

对于您的色标，您最好写1/7、2/7 等，让 JavaScript 为您处理。

【参考方案2】：

使用纯 JavaScript 绝对可以。 Mozilla 开发者网络是一个很好的入门资源。他们有一个canvas tutorial，应该能够让你朝着正确的方向开始。根据您有多少经验，您可能会考虑直接进入本教程的drawing shapes 部分。祝你好运。

【讨论】：

感谢您的回复。我一定会检查一下。我已经编写了一些我想要的代码，但是我制作的线性渐变由于某种原因使颜色倾斜，并且需要调整间距。