我使用for循环绘制不同的曲线。但是,如何将每一行更改为不同的颜色?

时间:2015-05-14 14:56:43

标签: javascript colors html5-canvas curves

在我的绘画功能中,我画了一切。我绘制白色矩形是因为你可以改变每条曲线的位置,否则你会看到所有曲线。不只是那个有你新职位的人。

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中获取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();
}

1 个答案:

答案 0 :(得分:0)

你可以使用这样的函数:

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+")";
希望它有所帮助!