Question

我对javascript很新，我想使用html canvas和javascript制作一个小线谱，这样我可以在点击按钮时显示吸收线等动画，就像在化学中一样。我只是不确定纯JavaScript是否能够处理这个问题。任何人都可以提供一些有关如何做到这一点的信息，或者甚至是否可能？如果需要，我很乐意提供更多信息。

编辑：这是我到目前为止所得到的，但我不知道为什么颜色渐变是倾斜的，颜色的变化和颜色的宽度需要调整，所以沿着矩形占据相同的数量。

HTML

<canvas id="spectralCanvas" width="600" height="100"></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

Answer 1

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

Answer 2

创建渐变函数的最后一个参数应为0，因为这将产生一个拉伸画布宽度的水平渐变。

对于你的色卡，你可能最好写1/7，2/7等等，让JavaScript为你处理它。

Javascript ROY G BIV线谱？

2 个答案: