javascript - 更改 Canvas 中每个矩形的颜色

Question

我为 6 个矩形创建 6 个按钮。单击该按钮时，它将更改/随机排列数组中颜色之后的矩形的颜色。我该怎么办？

var colorArray = [
  '#CEF19E',
  '#A7DDA7',
  '#78BE97',
  '#398689',
  '#0B476D'
];

var c = canvas.getContext('2d');
c.fillRect(500, 100, 100, 100);
c.fillRect(250, 100, 100, 100);
c.fillRect(500, 500, 100, 100);
c.fillRect(700, 600, 100, 100);
c.fillRect(800, 100, 100, 100);

function changeColor() {
    //????
}

Answer 1

不要!在鼠标事件上渲染!

我将此答案添加为 answer enxaneta 给出的示例是关于从鼠标事件进行渲染的不良实践。

鼠标事件(取决于设备配置和鼠标类型)每秒最多可以触发 1000 次。如果您通过鼠标事件进行渲染，这可能意味着您强制以比显示速度高很多倍的速率进行完整渲染(最多每秒 60 次)。这样做会无缘无故地快速耗尽笔记本电脑的电池。

解耦鼠标监听器和渲染。

鼠标事件应始终与渲染分离。使用事件监听器只记录鼠标状态。

当你向 DOM 渲染任何内容时，你应该始终通过帧请求来完成。这可以确保您不会呈现与显示硬件不同步的新上下文，并且不会向页面添加额外的看不见的和不必要的渲染和 DOM 复合周期。

渲染和鼠标事件处理示例。

在下面的示例中，我使用通过 requestAnimationFrame 调用的更新循环来检查鼠标的状态并根据需要进行更改。

为了确保没有不必要的渲染，必须将全局信号量redraw设置为 true 才能绘制 Canvas 内容。这意味着在下面的示例中，唯一的渲染是第一次渲染和矩形颜色更改时的渲染。

requestAnimationFrame(update); // will start the update loop when ready.
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 260;
var redraw = true; // When this is true the whole scene is rendered in time for the next display referesh


const colors = (() => {
    // Warning: MUST have more than one colour.
    //          At least one colour MUST be different than others.
    const cols = ["#CEF19E","#A7DDA7","#78BE97","#398689","#0B476D"];  
    return {
        get random() { return cols[Math.random() * cols.length | 0] },
        get default() { return "#DDD" },
    };
})();
const rectPos = [[10,10], [150, 10], [290, 10], [10, 150], [150, 150], [290, 150]];    
const rectSize = 100;
const rectangle = (x, y, w = rectSize, h= rectSize, style = colors.default) => ({x, y, w, h, style});
const rects = Object.assign(rectPos.map(rect => rectangle(...rect)), {
        getUnder(x, y) { return this.find(r => x >= r.x && x < r.x + r.w && y >= r.y && y < r.y + r.h) },
        draw() {
            for (const r of this) {
                ctx.fillStyle = r.style;
                ctx.fillRect(r.x, r.y, r.w, r.h);
            }
        },
    }
);

const mouse = {x: 0, y: 0, button: 0, over: false, changed : true};
function mouseEvents(e) {
    const bounds = canvas.getBoundingClientRect();
    const x = mouse.x = e.pageX - bounds.left - scrollX;
    const y = mouse.y = e.pageY - bounds.top - scrollY;
    mouse.over = x >= 0 && x < bounds.width && y >= 0 && y < bounds.height;
    mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
    mouse.changed = true;
}
["down","up","move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents));

function update() {
    var cursor = "default";
    if (mouse.changed) {
        if (mouse.over) {
            const rectUnderMouse = rects.getUnder(mouse.x, mouse.y);
            if (rectUnderMouse) {
                if (mouse.button) {
                    var newCol = colors.random;
                    while (newCol === rectUnderMouse.style) { newCol = colors.random };
                    rectUnderMouse.style = newCol;
                    mouse.button = false;
                    redraw = true;
                } else {
                    cursor = "pointer";
                }
            }
        }
    }
    if (redraw) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        rects.draw();
        redraw = false;
    }
    canvas.style.cursor = cursor;
    requestAnimationFrame(update);
}

canvas { position : absolute; top : 0px; left : 0px; }

<canvas id="canvas"></canvas>