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,//是否显示角度,默认falseshowVelocity: true,//是否显示速度,默认falseshowCollisions: true,//是否显示碰撞点,默认falseshowBroadphase: true,//是否显示宽频，用于调试,默认falseshowMousePosition: 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元素下生成画布进行绘制。

Matter-JS Render.create 渲染器创建相关推荐

【一统江湖的大前端（8）】matter.js 经典物理
[一统江湖的大前端(8)]matter.js 经典物理我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1! ...
【华为云技术分享】【一统江湖的大前端（8）】matter.js 经典物理
[摘要] 介绍前端物理引擎matterjs基本使用及实战示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题 ...
c4d支持mac系统渲染器有哪些_C4D Octane Render渲染器 V4.0-RC7-R4 for C4D R15-R19-R20 Win/Mac...
C4D Octane Render渲染器 V4.0-RC7-R4 for C4D R15-R19-R20 Win/Mac C4D Octane Render渲染器 V4.0-RC7-R4 for C4 ...
物理世界的互动之旅：Matter.js入门指南
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文简介戴尬猴,我是德育处主任欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
threejs相机和渲染器
渲染器渲染器其实代表的是canvas标签. 渲染器的类型 WebGLRender 使用WebGL来渲染图形,速度较快,但是有些机器不支持WebGL. CanvasRender 使用canvas2d来 ...
7 c4d r20对win_OC渲染器Octane Render V4.0-RC7-R4 for C4D R15-R19-R20 Win/Mac
OC渲染器Octane Render V4.0-RC7-R4 for C4D R15-R19-R20 Win/Mac Octane Render 4是世界上第一款和最快的GPU加速,无偏差,物理渲染器 ...
渲染器 render
最近在看<vue.js 设计与实现>,看到了虚拟 DOM 这里,做了个笔记文章目录 1.VNode虚拟DOM节点 2.render工作原理 3.代码实现 4.render拓展 1.VNo ...
Three.js之渲染器
本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRenderer DOMRenderer SVGR ...
UE4文本渲染器Text Render技巧与支持中文
UE4文本渲染器Text Render技巧与支持中文首先来支持中文在目录中新建Font 修改类型选择天下第一的思源字体字号根据字体,选择生成以后能看清的最小大小字号太小会模糊,太大占资源 ...
渲染测试软件 d15,D5 Render（D5 渲染器）1.7.0 正式版发布 | 一款 RTX 实时光线追踪可视化实时渲染引擎，而且是国产软件！...
长期的 Beta版公测后,D5 渲染器终于正式对外发布!最新的正式版是1.7.0.正式版将由免费版+付费增值服务这样的方式进行对外销售.另外最新还新增了社区免费版(社区免费版功能上有一点限制:无法渲染 ...

Matter-JS Render.create 渲染器创建

Render.create

options

Matter-JS Render.create 渲染器创建相关推荐

最新文章

热门文章