Question

我正在做一个小任务，要求我能够更改鼠标移动的背景颜色（学习Javascript / p5）。

我的方法遇到以下问题：稍微移动鼠标后，我设法获得了一种变色功能，但是它将立即将页面更改为白色，不会重置为0，并且也不会按我的意愿逐渐添加颜色（achterKleur + = 1）

var achterKleur;

//Canvas
function setup() {
    createCanvas(displayWidth, displayHeight);
    achterKleur = color(100);

}

//rode vierkant

function draw() {

    background(achterKleur);

    //gebouw
    fill(255, 0, 0);
    rect(200, 100, 300, 600);

    //grond 
    fill(222, 188, 147);
    rect(0, 700, 1600, 100);

    // ramen
    fill(255, 255, 255);
    rect(250, 150, 50, 50);
    rect(400, 150, 50, 50);

    rect(250, 300, 50, 50);
    rect(400, 300, 50, 50);

    rect(250, 450, 50, 50);
    rect(400, 450, 50, 50);
}

function mouseMoved () {
    achterKleur += 1;
   if (achterKleur > 255) {
       achterKleur = 0;
   }
}

我的最终目的是整合RGB而不是灰度。是什么导致我的问题，以及如何在“ if”语句中调用RGB？

Answer 1

非常愚蠢，我没有想到以下内容：

不需要使用mouseMoved函数，只需将mouseX / mouseY变量添加到RGB光谱中：

//Canvas
function setup() {
    createCanvas(displayWidth, displayHeight);
}



function draw() {
    //achtegrond met mouse X
    background(mouseX / 5, mouseY / 2, 0);

    //gebouw
    fill(255, 0, 0);
    rect(200, 100, 300, 600);

    //grond 
    fill(222, 188, 147);
    rect(0, 700, 1600, 100);

    // ramen
    fill(255, 255, 255);
    rect(250, 150, 50, 50);
    rect(400, 150, 50, 50);

    rect(250, 300, 50, 50);
    rect(400, 300, 50, 50);

    rect(250, 450, 50, 50);
    rect(400, 450, 50, 50);
}

如何更改mouseMoved的背景颜色？

1 个答案: