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>