我使用 for 循环绘制不同的曲线。但是我怎样才能将每一行更改为不同的颜色呢？

Question

在我的绘图函数中，我绘制了所有内容。我画了白色的矩形，因为你可以改变每条曲线的位置，否则你会看到所有的曲线。不仅仅是你的新职位。

function draw() {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight); 

    for (var i = 0; i <= line.length; i++) {    

            // Directly under this line of text stands my color for the 
            // curves and that is what needs to be corrected I guess.
            ctx.strokeStyle = "rgb(200,200,200)";
            ctx.beginPath();
            ctx.moveTo(500, 150);
            ctx.bezierCurveTo(line[i], 300, line[i], 300, line[i], 400 + (i * 15));
            ctx.stroke();
            ctx.closePath();

        console.log[i];
    }
}

下面的函数从 my html 中获取 my 的值，因此它可以绘制正确的曲线

function create(){
    console.log("change line");
    var form = document.getElementById("frm1");

    for(var i = 0; i < form.length; i++){
        line[i] = form[i].value;
    }

    console.log(line);
    draw();
}

Answer 1

你可以使用这样的函数：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

为 R、G 和 B（红绿蓝）的每个值检索 0 到 255 之间的随机数。所以我会把你的代码写成

red = getRandomInt(0,255);
green = getRandomInt(0,255);
blue = getRandomInt(0,255);
ctx.strokeStyle = "rgb("+red+","+green+","+blue+")";

希望对您有所帮助！

我使用 for 循环绘制不同的曲线。但是我怎样才能将每一行更改为不同的颜色呢？

I used a for loop to draw different curves. But how can I change every line to a different color?

javascript

colors

html5-canvas

curves