我试图使用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
}
});