Matter.js是一款基于JavaScript的开源2D物理引擎，它可以在浏览器环境中模拟真实的物理运动规律，包括重力作用、物体碰撞、弹性形变、摩擦力影响等效果，广泛应用于网页小游戏、动态交互页面、数据可视化展示等场景。它不需要依赖其他复杂的库，核心文件体积小，兼容主流的现代浏览器，即使是刚接触物理引擎的开发者也能快速上手。
Matter.js核心模块介绍
Matter.js的核心功能由几个关键模块组成，理解这些模块的作用能帮助我们更快搭建物理场景：
- Engine：物理引擎的核心，负责管理物理世界的运行逻辑，包括时间步长计算、物理状态更新等。
- World：物理世界容器，所有参与物理模拟的刚体、约束、复合体都需要添加到World中才会生效。
- Bodies：用于创建各种形状的刚体，比如矩形、圆形、多边形等，还可以设置刚体的质量、摩擦力、弹性等属性。
- Runner：运行器，负责驱动Engine不断更新物理状态，让物理模拟持续运行。
- Render：渲染器，用于将物理世界中的刚体、约束等元素绘制到浏览器的canvas画布上，方便我们查看模拟效果。
基础使用步骤
在网页中使用Matter.js实现物理效果，通常遵循以下流程：
1. 引入Matter.js库
可以通过CDN的方式直接引入Matter.js的核心文件，也可以下载到本地后引入：
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>
2. 创建物理引擎和物理世界
首先初始化Engine实例，再从Engine中获取对应的World实例：
// 创建物理引擎实例 const engine = Matter.Engine.create(); // 获取物理世界实例 const world = engine.world; // 设置物理世界的重力，默认重力y方向为1，这里调整为0.5让下落更缓慢 engine.world.gravity.y = 0.5;
3. 创建刚体并添加到物理世界
使用Bodies模块创建不同形状的刚体，设置好属性后添加到World中：
// 创建地面刚体，矩形，位置在画布底部，设置为静止刚体
const ground = Matter.Bodies.rectangle(400, 600, 800, 60, {
isStatic: true, // 静止刚体，不受重力影响
label: "地面"
});
// 创建圆形刚体，作为下落的小球
const ball = Matter.Bodies.circle(400, 50, 40, {
restitution: 0.8, // 弹性系数，值越大弹性越好
friction: 0.1, // 摩擦力
label: "小球"
});
// 创建矩形刚体，作为下落的方块
const box = Matter.Bodies.rectangle(300, 100, 80, 80, {
restitution: 0.5,
label: "方块"
});
// 将所有刚体添加到物理世界
Matter.World.add(world, [ground, ball, box]);
4. 初始化渲染器并关联画布
创建Render实例，指定渲染的canvas元素和渲染尺寸，将物理世界和渲染器绑定：
// 获取页面中的canvas元素
const canvas = document.getElementById("physics-canvas");
// 创建渲染器实例
const render = Matter.Render.create({
canvas: canvas,
engine: engine,
options: {
width: 800, // 画布宽度
height: 600, // 画布高度
wireframes: false, // 是否使用线框模式，false为填充模式
background: "#f0f0f0" // 画布背景色
}
});
// 启动渲染器
Matter.Render.run(render);
5. 启动运行器驱动物理模拟
创建Runner实例并运行，让物理引擎持续更新状态：
// 创建运行器实例 const runner = Matter.Runner.create(); // 将运行器和物理引擎绑定并启动 Matter.Runner.run(runner, engine);
完整示例代码
以下是整合了上述所有步骤的完整网页代码，直接保存为html文件即可在浏览器中运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matter.js基础物理模拟</title>
<style>
body {
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
}
#physics-canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Matter.js基础物理模拟示例</h1>
<canvas id="physics-canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>
<script>
// 创建物理引擎
const engine = Matter.Engine.create();
const world = engine.world;
engine.world.gravity.y = 0.5;
// 创建刚体
const ground = Matter.Bodies.rectangle(400, 600, 800, 60, {
isStatic: true
});
const ball = Matter.Bodies.circle(400, 50, 40, {
restitution: 0.8,
friction: 0.1
});
const box = Matter.Bodies.rectangle(300, 100, 80, 80, {
restitution: 0.5
});
// 添加刚体到世界
Matter.World.add(world, [ground, ball, box]);
// 初始化渲染器
const canvas = document.getElementById("physics-canvas");
const render = Matter.Render.create({
canvas: canvas,
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false,
background: "#f0f0f0"
}
});
Matter.Render.run(render);
// 启动运行器
const runner = Matter.Runner.create();
Matter.Runner.run(runner, engine);
</script>
</body>
</html>
常见应用场景
Matter.js的轻量特性和丰富的功能让它在很多网页场景中都能发挥作用：
- 网页小游戏开发：比如物理弹球、堆叠类游戏、物理闯关游戏等，不需要自己实现复杂的碰撞和重力逻辑。
- 动态交互展示：产品展示页面中让元素按照物理规律运动，提升页面的趣味性和交互感。
- 数据可视化：用物理刚体表示数据节点，通过物理碰撞和约束展示数据之间的关系。
- 教学演示：物理规律的教学页面中，模拟自由落体、碰撞实验等场景，让抽象的物理知识更直观。
注意事项
在使用Matter.js时需要注意几个常见问题：
- 刚体的位置坐标是刚体的中心坐标，而不是左上角坐标，创建刚体时需要计算好位置避免超出画布。
- 静止刚体需要设置
isStatic: true，否则静止刚体也会受重力影响下落。 - 如果需要自定义渲染效果，可以不使用Matter.js自带的Render模块，而是通过监听Engine的更新事件，自己用canvas或者DOM元素实现渲染逻辑。
- 物理模拟的帧率受浏览器性能影响，如果刚体数量过多可能会出现卡顿，需要合理控制场景中的刚体数量。
Matter.js物理引擎网页动画JavaScript物理模拟修改时间：2026-07-03 17:57:36