Matter.js 改变颜色答案

【问题标题】：Matter.js change colorsMatter.js 改变颜色
【发布时间】：2014-05-06 09:14:45
【问题描述】：

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

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

有谁知道matter.js样式的教程或其他东西

Matter.js

【问题讨论】：

标签： javascript html5-canvas matter.js

【解决方案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传入引擎。

【讨论】：

如何传递自定义颜色（如#ff0000）？将fillStyle 设置为#ff0000 或rgb(255,0,0) 根本不起作用。
@user4180960 确保为渲染实例设置render.options.wireframes = false。

【解决方案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
    }
});

【讨论】：

谢谢！花了几个小时尝试设计身体样式，但在我看到这个之前没有任何效果！ wireframes:false

【解决方案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
  }
})

【讨论】：