Matter-JS Render.create 渲染器创建
Render.create
1、create 方法用于创建新的渲染器。option 参数是一个对象，用于指定要覆盖的默认属性值。所有属性都有默认值，许多属性值都是根据其他属性自动预先计算而得到。
2、Matter.Render.create([options]) 函数源码如下。
/**
* Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults.
* All properties have default values, and many are pre-calculated automatically based on other properties.
* See the properties section below for detailed information on what you can pass via the `options` object.
* @method create
* @param {object} [options]
* @return {render} A new renderer
*/
Render.create = function(options) {
var defaults = {
controller: Render,
engine: null,
element: null,
canvas: null,
mouse: null,
frameRequestId: null,
options: {
width: 800,
height: 600,
pixelRatio: 1,
background: '#18181d',
wireframeBackground: '#0f0f13',
hasBounds: !!options.bounds,
enabled: true,
wireframes: true,
showSleeping: true,
showDebug: false,
showBroadphase: false,
showBounds: false,
showVelocity: false,
showCollisions: false,
showSeparations: false,
showAxes: false,
showPositions: false,
showAngleIndicator: false,
showIds: false,
showShadows: false,
showVertexNumbers: false,
showConvexHulls: false,
showInternalEdges: false,
showMousePosition: false
}
};options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Matter-JS</title>
<!--matter-js cdnjs地址-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<!--<script src="../js/matter_0.14.2.js"></script>-->
<script type="text/javascript">
var stageWidth = 800;//舞台宽度
var stageHeight = 500;//舞台高度
window.onload = function () {
var Engine = Matter.Engine;//引擎
var Render = Matter.Render;//渲染器
var World = Matter.World;//世界
var MouseConstraint = Matter.MouseConstraint;//鼠标控制
var Bodies = Matter.Bodies;//物体
var Composites = Matter.Composites;//符合材料
var Composite = Matter.Composite;//混合体
var Common = Matter.Common;//公用模块
var engine = Engine.create();//创建引擎
var render = Render.create({//创建渲染器
engine: engine,//渲染创建好的引擎
/**渲染页面的body元素，即会在body标签自动新建<canvas>画布，同理如果element的值是某个div元素-
* 则会在div下自动新建canvas，canvas的尺寸是options中的width、height
* */
element: document.body,
options: {
width: stageWidth,//画布的宽度
height: stageHeight,//画布的高度
wireframes: true,//线框模式,默认false不使用线框模式
showAngleIndicator: true,//是否显示角度,默认false
showVelocity: true,//是否显示速度,默认false
showCollisions: true,//是否显示碰撞点,默认false
showBroadphase: true,//是否显示宽频，用于调试,默认false
showMousePosition: false // 鼠标约束线
}
});
Engine.run(engine);//运行引擎
Render.run(render);//运行渲染器
/**设置鼠标控制*/
var mouseConstraint = MouseConstraint.create(engine, {});
var stack = Composites.stack(20, 20, 12, 4, 0, 0, function (x, y) {
switch (Math.round(Common.random(0, 1, 2))) {
/**为0时创建矩形*/
case 0:
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
/**为1时创建多边形*/
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
/**为2时创建圆形*/
case 2:
return Bodies.circle(x, y, Common.random(5, 20));
}
});
/**将三个矩形以及鼠标控制添加到世界中*/
World.add(engine.world, [mouseConstraint, stack]);
World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙
}
/**创建4面墙-强制物体在墙内运动*/
function create4Wall(Bodies) {
var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});
var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});
var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});
var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});
return [ground_top, ground_right, ground_bottom, ground_left];
}
</script>
</head>
<body>
</body>
</html>当渲染的是body的元素时，则matter-js自动就是在body元素下生成画布进行绘制。