Javascript G-BIV谱线？

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

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

HTML

}

loadSpectralCanvas（）

---

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

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

---

对于颜色停止，您最好编写

1/7

、

2/7

等等，让JavaScript为您处理。

感谢您的回复。我一定会查清楚的。我已经写了一些我想要的代码，但是由于某种原因，我制作的线性渐变使颜色倾斜，间距需要调整。如果“纯JavaScript”不能做到这一点，那他妈的怎么办？我不知道，这就是问题的原因：P

<canvas id="spectralCanvas" width="600" height="100"></canvas>

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();