为什么我的元素颜色不准确？

Question

我有一张流线型的风图（请参阅https://earth.nullschool.net/ 了解它的外观）。

我每 10 毫秒对该点进行一次加权插值，它会创建一个 uVector 和一个 vVector，然后计算该速度。根据该速度，为该点分配相应的颜色，如下所示。

            if (weightWS < 13) {
                color = "#ffa500"
            }
            if (weightWS < 10) {
                color = "#CCCC00"
            }
            if (weightWS < 7) {
                color = "#008000"
            }
            if (weightWS < 4) {
                color = "#0000ff"
            }
            if (weightWS < 1) {
                color = "#800080"
            }

颜色然后被发送到动画函数。它在drawData[3]。

        function animate(){
            //This changes the opacity of the canvas
            ctx.beginPath(); 
            ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.closePath();
            //This is where the point is created.
            for(var pointCount=0;pointCount<pointNum;pointCount++){
                let xMid,yMid;
                let xPoint = points[pointCount][0];
                let yPoint = points[pointCount][1];
                if(xPoint < 141 || xPoint >580 || yPoint < 120 || yPoint > 524){
                    xPoint = getRandomIntInclusive(141,580);
                    yPoint = getRandomIntInclusive(120,524);
                    points.push([xPoint,yPoint]);
                }
                //ctx.fillStyle = "#000000";
                var drawData = weightAllData(xPoint,yPoint); //output: speed, uVec, vVec, color
                colorArr[pointCount] = drawData[3]; //assign color to array, for QA purposes
                
                ctx.moveTo(xPoint, yPoint);
                ctx.lineTo(xPoint+drawData[1],yPoint+drawData[2]);
                ctx.strokeStyle = drawData[3]; //assign the color to the strokeStyle
                //console.log(ctx.strokeStyle); //prints color
                ctx.stroke(); //makes line.
                points[pointCount][0] = xPoint+drawData[1];
                points[pointCount][1] = yPoint+drawData[2];
                //console.log(drawData[0])
         }

虽然控制台显示不同的颜色，主要是"#800080"和"#0000ff"，但颜色会影响所有的点，速度为1+的点仍然是紫色的（"#800080"）。

颜色一次应该只影响一个像素，我很肯定应该显示一些蓝点 ("#0000ff")。如果显示一个蓝点，则它同时是所有像素，这不是目标。

无论动画的速度如何（例如 10 毫秒、1000 毫秒、10000 毫秒），都会发生这种情况。有没有人有任何解决方案或暗示问题是什么？

非常感谢您的所有帮助。我非常感谢所花费的时间和精力。

Answer 1

问题在于，在 for 循环中，您将路径段添加到同一路径。

例如下面的 sn-p 有两个循环。第一个将 100 个路径段添加到一个路径。每次调用stroke() 时都会重绘所有行。所有路径段都以最后使用的颜色绘制。而且效率非常低，最上面的循环画了 5050 条线段，第 1 遍画了 1 条线，第 2 遍画了 2 条线，第 3 遍画了 3 条线（第 3 遍画了 6 条线）等等。

第二个循环在循环内开始一条新路径，每个路径段获得不同的颜色，仅绘制了 100 条线段。

const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
const colors = ["Green", "Blue", "Red", "Black", "Yellow"];

ctx.beginPath();              // start a new path
for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.moveTo(i * 5, 0);    // adds to existing path
    ctx.lineTo(i * 5, 40);
    ctx.stroke();            // draw all path segments since last beginPath
}


for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.beginPath();         // start a new path
    ctx.moveTo(i * 5, 60);   // adds to the path
    ctx.lineTo(i * 5, 100);
    ctx.stroke();            // draw the path
}

canvas {boarder: 2px solid #000}

<canvas id="canvas" width="500" height="100"></canvas>

通常当你改变样式、线宽等时，你需要开始一个新的路径。

Answer 2

它们需要是 else ifs 而不是 if 但我可能会使用范围作为变量而不是多个 if 语句。但是使用你的代码， 这可能有效：

if (weightWS <= 13 && weightWS > 10) {
            color = "#ffa500"
        }
        else if (weightWS <= 10 && weightWS > 7) {
            color = "#CCCC00"
        }
        else if (weightWS <= 7 && weightWS > 4) {
            color = "#008000"
        }
        else if (weightWS <= 4 && weightWS > 1) {
            color = "#0000ff"
        }
        else if (weightWS <= 1 && weightWS > 0) {
            color = "#800080"
        }
        else {
            color = "#000000")
        }

如果可行，我建议设置像 Purple = [0, 1] 这样的变量