Matter.js改变了颜色

Question

我正在一个小项目上使用matter.js.

我正在尝试更改画布的背景颜色并向对象添加自定义颜色.

有没有人知道教程或东西的样式问题.js

Matter.js

Answer 1

属性是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
    }
});

您也可以使用精灵,查看代码

如果你需要更多的渲染控制,最好克隆Render.js,自定义它并通过Engine.create(element, options)as 将它传递给引擎engine.render.controller.

Answer 2

由于没有人回答有关问题的部分

我正在尝试更改画布的背景颜色 [...]

这部分是这样完成的：

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
  }
})```

Answer 3

正如@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
    }
});