无法使用 If else 更改 context.FillStyle 颜色？答案

【问题标题】：Can't change context.FillStyle color using If else?无法使用 If else 更改 context.FillStyle 颜色？
【发布时间】：2026-01-16 04:45:01
【问题描述】：

我正在构建俄罗斯方块游戏，但我无法理解为什么以下代码不起作用..

function createPeice(type) {
    if (type === "T"){
     context.fillStyle = "red";
        return [
            [0, 0, 0],
            [1, 1, 1],
            [0, 1, 0],
        ];

通过我的主矩阵函数中的这段代码，我所有的其他部分都是蓝色的......

context.fillStyle = "blue";
        context.fillRect(x + offset.x,
             y +offset.y, 1,1);

如您所见，我正在尝试根据创建的作品来更改每件作品的颜色。我希望这可以工作，但由于某种原因它不会改变颜色（但也不会破坏程序）。

我研究过的一件事是能够使用原始 context.fillStyle = [ "red" , "blue", "yellow" ] 每次掉落一块时从数组中选择随机颜色，但我没有成功。

关于如何让它工作的任何建议，更好的是，有人可以向我解释为什么我的 if-else 不起作用？

【问题讨论】：

标签： html canvas html5-canvas tetris

【解决方案1】：

这个答案有一点猜测，因为您可能会忽略 ...fillStyle = "red"; 和 drawRect 之间发生的其他事情，但是：

它没有用红色填充，因为您在绘制之前将填充颜色设置为蓝色。这就是画布 2D 绘图上下文的工作原理——它是“即时的”。 fillStyle 的设置将在整个程序中采用许多不同的值，但它是在每次使用绘图调用期间设置的值。

context.fillStyle = [ "red" , "blue", "yellow" ] 选择随机颜色

https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle-dev 根据规范，fillStyle 属性“理解”CSS 颜色、渐变和图案的字符串。在这一点上，将其设置为数组以让渲染器随机选择一个的想法纯属想象。我会说它失败是件好事 - 不是为缺乏功能而喝彩，而是为了庆祝平台拥有完整的文档和规范，涵盖了实现者确实费心编程的所有事情。

【讨论】：

【解决方案2】：

您没有提供足够的信息来推断您的程序没有按预期运行的原因。提出问题时，您需要提供足够的信息让我们重现问题。

问题的第二部分。从数组中选择一个随机项目很容易。下面的函数会做到这一点。

function randomItem(array) {
    return array[Math.random() * array.length | 0];
}

或者对于很长的数组

function randomItem(array) {
    return array[Math.floor(Math.random() * array.length)];
}

用法

const COLORS = ["#F00", "#0A0", "#00F"];  // Define once

const myColor = randomItem(COLORS);

【讨论】：