Javascript 更改matterjs中的默认画布大小

我正在尝试覆盖设置为：

800x600

在对文档进行深入研究后，我发现：

Matter.Render.create([options])

看起来有趣的选项有：

render.options.height

和

render.options.width

如何正确使用它们？

我所尝试的：

(function(){
    //this is the correct reference
    var canvas = document.getElementById('canvas');
    var renderer = Matter.Render.create({
        canvas: canvas,
        height: 1000,
        width: 1000
    });
})()

我得到的警告是：

[事项]警告：未传递“render.element”，未传递“render.canvas” 插入到文档中

根据该报告：

render.element HtmleElement

对画布所在元素的引用 要插入的（如果未指定render.canvas）

---

不幸的是Matter.js没有很好的文档（尽管相信我，它是一个优秀的引擎）。您应该调用

引擎。使用具有属性
渲染的对象创建
，该对象具有属性
元素
和
画布
。如果未将画布传递给此函数，则会创建一个新的画布元素，并将其附加到给定元素。虽然在我的测试用例中，它似乎仍然需要一个元素作为render属性。我知道这很奇怪，但更糟的是

现在，如果要设置画布的大小，请遍历主对象并遵循以下路径->
render.options.width
和
render.options.height
，如下所示：

{
   render: {
       options: {
           height: 1000,
           width: 1000
       }
   }
}

但问题是，当您传递自己的canvas元素时，Matter决定画布的高度和宽度应该是设置给元素的，而不是智能程序员传递选项的高度和宽度。我已经提交并提供了解决方案的PR，但可能不会很快合并。因此，我还不能为您提供一个在选项中覆盖此选项的完美解决方案，但解决此问题的简单方法是在初始化引擎之前设置
canvas.width
和
canvas.height

canvas.width = 1000;
canvas.height = 1000;

还有一种内部调整大小的方法，但并不比上面的选项更好。因此，如果您真的想覆盖这些选项（可能是在引擎上开发），那么我建议您将画布创建留给Matter.JS，只需保留
render.canvas
未定义的

下面是使用
canvas.width
和
canvas.height
的完整解决方案，请注意，上面提到的警告不再存在，Matter.js使用给定的canvas元素并将其附加到给定的渲染元素。


//Matter.js模块别名
var发动机=物质发动机，
世界=物质。世界，
身体=物质。身体，
物体=物质，物体，
复合材料=物质。复合材料，
复合=物质，复合，
约束=物质。约束，
发动机；
（功能（）{
var canvas=document.getElementById（'canvas'）；
可变宽度=1000，
高度=1000；
画布宽度=宽度；
canvas.height=高度；
engine=engine.create({
呈现：{
元素：document.body，
画布：画布，
选项：{
宽度：1000，
身高：1000
}
}
});
//发动引擎
引擎。运行（引擎）；
})();

感谢您的洞察力。今天晚些时候我会测试一下，然后再给你回复。是的，文档可能会更好。理想情况下，我正在寻找一种方法，让画布填充整个页面，而不仅仅是网页中的一个框。您可以设置canvas.width=window.innerWidth和canvas.height=window.innerHeights。它不是代码库的一部分。我将报告该问题并创建一个拉请求，但我怀疑它是否会很快进入构建。就我而言，这是一个令人困惑的错误。@Grimbode，我已经修复了canvas width和height传递的问题，并在创建了一个pull请求，合并可能需要一些时间，但如果您同时需要它，您可以从这里@ANON复制代码，尽管我记得MatterJS和大多数引擎一样有一个缩放方法，我建议改用canvas.scale。canvas scale的性能要好得多，但您需要创建两个单独的画布（如果您需要帮助创建问题并向我发送链接）。