Javascript 如何使用ctx.fill给矩形涂上不同的颜色？

这对很多人来说可能非常明显，但我正在尝试设计一款游戏，我希望矩形播放器的颜色与墙壁不同。我该如何给它们涂上不同的颜色？现在我将ctx.fillstyle设置为所有矩形的颜色。对于这个问题，我希望矩形1为浅灰色，矩形2为红色，这是我已经尝试过的。而且我仍然需要我的矩形成为对象

ctx.fillStyle = "lightgray";
ctx.strokeStyle = "skyblue";
ctx.beginPath()
// Moving Rect 1
var rect1 = {
    x: 125,
    y: 10,
    w: 20,
    h: 20
};
ctx.closePath()
ctx.fill()
var direction1 = 0



ctx.fillStyle = "red";
ctx.strokeStyle = "skyblue";
ctx.beginPath()

var rect2 = {
    x:120,
    y:110,
    w:10,
    h:10
};

ctx.closePath()
ctx.fill()

---

你就快到了

只需将填充和笔划定义添加到rect对象：

var rect1 = {
    x: 125,
    y: 10,
    w: 20,
    h: 20,
    fill:'lightgray',
    stroke:'skyblue',
};

然后，您可以仅使用单个函数绘制每个矩形：

drawRect(rect1);

function drawRect(rect){
    ctx.fillStyle=rect.fill;
    ctx.strokeStyle=rect.stroke;
    ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
    ctx.strokeRect(rect.x,rect.y,rect.w,rect.h);    
}

您甚至可以创建一个“工厂”函数，用给定的定义创建一个新的rect：

var grayRect=createRect(125,10,20,20,'lightgray','skyblue');
var redRect=createRect(120,110,10,10,'red','skyblue');

function createRect(x,y,width,height,fill,stroke){
    return({
        x:x,
        y:y,
        w:width,
        h:height,
        fill:fill,
        stroke:stroke
    });
}

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-grayRect=createRect（125,10,20,20，'lightgray'，'skyblue'）；
var redRect=createRect（120110,10,10，'red'，'skyblue'）；
drawRect（grayRect）；
drawRect（redRect）；
函数createRect（x、y、宽度、高度、填充、笔划）{
返回({
x:x，y:y，
宽度：宽度，高度：高度，
填充：填充，笔划：笔划
});
}
函数drawRect（rect）{
ctx.fillStyle=rect.fill；
ctx.strokeStyle=直线行程；
ctx.fillRect（矩形x、矩形y、矩形宽度、矩形高度）；
ctx.strokeRect（矩形x、矩形y、矩形宽度、矩形高度）；
}

body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}

---

谢谢你的回答！你知道如何用这种方法改变矩形的不透明度/alpha吗？不客气！要控制矩形的alpha，可以将alpha属性指定给矩形对象（例如

alpha:0.50，

）。然后在

drawRect

中，您可以更改

ctx.globalAlpha=rect.alpha。绘制矩形后，确保通过重置
ctx来“清理”。globalAlpha=1.00
。祝你的项目好运！