如何使用ctx.fill为不同颜色的矩形着色？

Question

对于很多人来说，这可能是非常明显的，但我试图设计一个游戏，我希望矩形播放器的颜色不同于墙壁。我将如何以不同方式着色它们？我现在设置ctx.fillstyle的是所有矩形的颜色。对于这个问题，我希望rect1是lightgray，rect2是红色的，这是我试过的。我还需要我的矩形作为对象。

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()

Answer 1

你几乎就在那里！

只需将填充和描边定义添加到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);    
}

您甚至可以创建一个“工厂”功能，使用您给定的定义创建一个新的矩形：

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=canvas.width;
var ch=canvas.height;

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

drawRect(grayRect);
drawRect(redRect);


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

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

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>