verlet-js的一些特性如下：
- Simulation（模拟）：包含复合实体的根对象，用于在一个场景中驱动实体的所有物理特性和动画效果
- Composites（复合实体）：用于场景内的高层次的对象（比如球、连接物、布料等等）
- Particles（粒子系统）：空间中的粒子点，用于响应各种操作（重力、拖拽等）
- 约束：将粒子连接在一起，使它们能够互相交流，包括固定（将一个粒子固定到空间中的某个位置）、距离约束（通过一定的直线距离绑定2个粒子）、角度约束（通过一定角度绑定3个粒子）
实现一些物理特效 很帅 很拉风
相关源代码：https://github.com/subprotocol/verlet-js
其中里面有四个例子 一些图形那个源代码最少 自己看了下 做了下注释 还有很多不太清楚的地方 希望可以留言进行交流
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verlet Shapes</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/vec2.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/constraint.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/verlet.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/objects.js"></script>
</head>
<body>
<canvas id="scratch" style="width: 800px; height: 500px;"></canvas>
<script type="text/javascript">
window.onload = function() {
//获得画布
var canvas = document.getElementById("scratch");
// canvas dimensions
//获得画布的尺寸
var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height);
// retina
//根据设备屏幕尺寸进行长宽适配 0.75 1 1.5
var dpr = window.devicePixelRatio || 1;
canvas.width = width*dpr;
canvas.height = height*dpr;
canvas.getContext("2d").scale(dpr, dpr);
// simulation
//模拟特性 包含复合实体的根对象，用于在一个场景中驱动实体的所有物理特性和动画效果
var sim = new VerletJS(width, height, canvas);
//摩擦力
sim.friction = 1;
// entities
//实体
//线段 vect2 是座标点
var segment = sim.lineSegments([new Vec2(20,10), new Vec2(40,10), new Vec2(60,10), new Vec2(80,10), new Vec2(100,10)], 0.02);
//pin 钉住 第0 4两个点
var pin = segment.pin(0);
var pin = segment.pin(4);
//（原点，大小，最外层点数，）
var tire1 = sim.tire(new Vec2(200,50), 50, 30, 0.3, 0.9);
var tire2 = sim.tire(new Vec2(400,50), 70, 7, 0.1, 0.2);
var tire3 = sim.tire(new Vec2(600,50), 70, 3, 1, 1);
// animation loop
var loop = function() {
sim.frame(16);
sim.draw();
requestAnimFrame(loop);
};
loop();
};
</script>
</body>
</html>