matterJS 渲染到画布

Question

我正在尝试使用 matterJS 并将其渲染到我的布局中的特定画布，但我无法管理它。

这是JS：

window.addEventListener("load",init);
    function init(){

    var canvas = document.getElementById('matterJS');
    var width = 100,
        height = 100;

    canvas.width = width;
    canvas.height = height; 
        // Matter.js - http://brm.io/matter-js/

        // Matter module aliases
        var Engine = Matter.Engine,
            World = Matter.World,
            Body = Matter.Body,
            Composites = Matter.Composites,
            MouseConstraint = Matter.MouseConstraint;

        // create a Matter.js engine
        var engine = Engine.create({
          render: {
            element: document.body,
            canvas: canvas,
            options: {
              width: 100,
              height: 100,                  
              showAngleIndicator: true,
              showVelocity: true,
              wireframes: false
            }
          }
        });

        // add a mouse controlled constraint
        var mouseConstraint = MouseConstraint.create(engine);
        World.add(engine.world, mouseConstraint);

        // add a Newton's Cradle (using the Composites factory method!)
        var cradle = Composites.newtonsCradle(280, 150, 5, 30, 200);
        World.add(engine.world, cradle);

        // offset the first body in the cradle so it will swing
        Body.translate(cradle.bodies[0], { x: -180, y: -100 });

        // run the engine
        Engine.run(engine);
   }

在我的 html 中我这样做：

<canvas class="matterJS"></canvas>

我没有收到任何错误，但也没有呈现任何内容。我认为这应该可以。但为什么没有呢？

我只能在创建这样的引擎时渲染结果：

var engine = Engine.create(document.getElementById('matterJS'),{
                options: {
                  width: 100,
                  height: 100,                  
                  showAngleIndicator: true,
                  showVelocity: true,
                  wireframes: false
              }
            });

Answer 1

现在是这样解决的：

var canvas = document.getElementById('matterJS');
var width = 800,
    height = 800;

canvas.width = width;
canvas.height = height; 
    // Matter.js - http://brm.io/matter-js/

    // Matter module aliases
    var Engine = Matter.Engine,
        World = Matter.World,
        Body = Matter.Body,
        Composites = Matter.Composites,
        MouseConstraint = Matter.MouseConstraint;

    // create a Matter.js engine
    var engine = Engine.create(canvas, {
        options: {
          width: 1000,
          height: 1000,                 
          showAngleIndicator: true,
          showVelocity: true,
          wireframes: false
      }
    });