Question

我在一个小项目中使用了matter.js。

我尝试更改画布的背景颜色并为对象添加自定义颜色。

有没有人知道教程或其他关于造型问题的内容.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
    }
});

您也可以使用精灵，请参阅the code

如果您需要更多渲染控制，最好克隆Render.js，自定义它并通过Engine.create(element, options) engine.render.controller将其传递到引擎中。

Answer 2

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

Answer 3

由于没有人回答有关

的部分问题

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

该部分是这样完成的：

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改变了颜色

3 个答案: