我用循环绘制不同的曲线.但是，我该如何将每条线更改为不同的颜色

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];
    }
}

下面的功能获取我的html的值，因此可以绘制正确的曲线

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+")";

希望它有帮助！