-1

我对 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

4

2 回答 2

0

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

于 2014-06-28T21:53:34.340 回答
0

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

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

于 2014-06-28T22:33:16.823 回答