这些属性是body.render.fillStyle、body.render.strokeStyle和body.render.lineWidth。
你可以把这些传递给Body.create(options)，或者更可能的是，如果你使用工厂的话。

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

您也可以使用sprite，请参阅代码
如果你需要更多的渲染控制，最好克隆Render.js，对其进行定制，并通过Engine.create(element, options)将其作为engine.render.controller传递给引擎。

正如@Martti Laine在评论中提到的，下面的代码只会起作用：

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

如果render.options.wireframes被设置为false。

var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: window.innerWidth,
      height: window.innerHeight,
      wireframes: false // <-- important
    }
});

既然没人回答关于
我正在尝试改变画布的背景色[...]
这部分是这样完成的：

const Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create an engine
const engine = Engine.create();

const render = Render.create({
  element: document.body,
  engine,
  options: {
    width: some_width,
    height: some_height,
    wireframes: false,
    background: 'rgb(255,0,0)' // or '#ff0000' or other valid color string
  }
})

现有的答案显示了如何对Matter.js的内置渲染器进行简单的颜色修改，这些答案很有用，但由于内置渲染器仅用于原型开发，因此尚未提供该问题的通用解决方案。
js是一个物理引擎，而不是渲染库，它的目的是为你选择的任何渲染前端提供一个无头后端。
我有很多帖子展示了如何在各种环境下使用它，浏览一下这些帖子应该会发现MJS的渲染限制一次又一次地出现，解决方案几乎总是"不要使用内置的渲染器"。
一般办法：

• 使用DOM或React进行渲染
• 使用P5.js进行渲染
• 使用HTML5画布渲染

使用DOM的解决方案：

• 如何在matter.js中圆化图像
• 如何把一个视频的身体，Matter.js
• js：有没有什么方法可以使我的精灵动画化
• Matter.js矩形内的文本

如果你仍然不相信，这里有一个使用canvas和rough.js的例子，说明一旦你没有了头，你几乎可以在样式和颜色方面做任何你想做的事情：

const renderRect = ({body, rect, w, h}) => {
  const {x, y} = body.position;
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(body.angle);
  ctx.translate(-w / 2, -h / 2);
  r.draw(rect);
  ctx.restore();
};

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

const r = rough.canvas(canvas);
const engine = Matter.Engine.create();  
const box = {
  w: 40, h: 40,
  body: Matter.Bodies.rectangle(150, 0, 40, 40),
  rect: r.generator.rectangle(0, 0, 40, 40, {
    fill: "red",
    fillStyle: "solid",
    roughness: 1.5,
    hachureAngle: 45,
    hachureGap: 7,
    strokeWidth: 2,
  }),
};
const ground = {
  w: 400, h: 120,
  body: Matter.Bodies.rectangle(
    200, 200, 400, 120, {isStatic: true}
  ),
  rect: r.generator.rectangle(0, 0, 400, 120, {
    fill: "green",
    fillStyle: "solid",
    roughness: 1.5,
    strokeWidth: 2,
  }),
};
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(
  engine.world, [box.body, ground.body, mouseConstraint]
);

(function rerender() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderRect(ground);
  renderRect(box);
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

body {
  margin: 0;
  background: #dda;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<script src="https://unpkg.com/roughjs@4.3.1/bundled/rough.js"></script>
<canvas width="700" height="400"></canvas>