我试图使用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 im中执行以下操作:
<canvas class="matterJS"></canvas>

我没有任何错误,但也没有任何显示。。我认为这应该管用。但为什么不呢?
我只能在创建这样的引擎时呈现结果:
var engine = Engine.create(document.getElementById('matterJS'),{
                options: {
                  width: 100,
                  height: 100,
                  showAngleIndicator: true,
                  showVelocity: true,
                  wireframes: false
              }
            });

最佳答案

现在就这样解决了:

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

07-24 22:06