您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

Web Chart 入門（7）：Canvas 物理動畫效果——撕扯窗布實現

編輯：Java 相關知識

物理動畫原理

物理動畫模擬真實世界物理規律（如重力、彈性、碰撞）。核心思想：將動作拆分為極小的時間步長，每幀更新位置、速度，視覺上形成流暢動畫。

撕扯窗布完整實現（三個文件）

1. tearCloth.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Tear Cloth Demo</title>
  <link rel="stylesheet" type="text/css" href="tearCloth.css" />
</head>
<body>
  <canvas id="c"></canvas>
  <div id="info">
    <div id="top"><a id="close" href="">close</a></div>
    <p>- Tear the cloth with your mouse.<br><br>
       - Right click and drag to cut the cloth<br><br>
       - Reduce physics_accuracy if it's laggy.</p>
  </div>
  <script src="tearCloth.js"></script>
</body>
</html>

2. tearCloth.css

* { margin:0; overflow:hidden; user-select:none; }
body, canvas { background:#333; }
canvas { width:100%; height:376px; display:block; }
#info { position:absolute; left:-1px; top:-1px; max-width:380px; background:#f2f2f2; border-bottom-right-radius:10px; }
#top { background:#fff; border-bottom:1px solid #eee; }
p { font-family:Arial; color:#666; font-size:16px; margin:10px; text-align:justify; }
a { font-family:sans-serif; color:#444; font-size:20px; text-decoration:none; }
#close { float:right; margin:10px; }

3. tearCloth.js 核心邏輯

關鍵參數配置：

var physics_accuracy = 6,    // 物理迭代精度
    mouse_influence = 20,    // 滑鼠影響半徑
    mouse_cut = 5,           // 剪切半徑（右鍵）
    gravity = 900,           // 重力加速度
    cloth_height = 30,       // 窗布網格高度
    cloth_width = 50,        // 窗布網格寬度
    spacing = 7,             // 節點間距
    tear_distance = 60;      // 撕裂距離閾值

核心類結構：

Point：質點，含位置、速度、約束、釘固點。
Constraint：兩質點間的彈性約束，維持間距，超過 tear_distance 斷裂。
Cloth：網格系統，初始化質點陣列，建立水平/垂直約束，頂行釘固。

動畫循環：

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    cloth.update();   // 解約束、更新位置
    cloth.draw();     // 繪製所有約束線段
    requestAnimFrame(update);
}