js canvas模拟布料鼠标拖拽裁剪物理垂摆交互动画效果代码
代码语言:html
所属分类:动画
代码描述:js canvas模拟布料鼠标拖拽裁剪物理垂摆交互动画效果代码
代码标签: 布料 鼠标 拖拽 裁剪 物理 垂摆 交互 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } body { background: #F2F2F2; } #c { display: block; margin: 20px auto 0; } #info { position: absolute; left: -1px; top: -1px; width: auto; max-width: 380px; height: auto; background: #f2f2f2; border-bottom-right-radius: 10px; border: 1px solid #333; } #top { background: #fff; width: 100%; height: auto; position: relative; border-bottom: 1px solid #eee; } p { font-family: Arial, sans-serif; color: #666; text-align: justify; font-size: 16px; margin: 10px; } a { font-family: sans-serif; color: #444; text-decoration: none; font-size: 20px; } #site { float: left; margin: 10px; color: #38a; border-bottom: 1px dashed #888; } #site: hover { color: #7af; } #close { float: right; margin: 10px; } #p { font-family: Verdana, sans-serif; position: absolute; right: 10px; bottom: 10px; color: #167fc6; border: 1px dashed #555; padding: 4px 8px; } </style> </head> <body> <canvas id="c"></canvas> <div id="info"> <div id="top"> <a id="site" >玩法</a> <a id="close" href="">关闭</a> </div> <p> <br>- 用鼠标撕扯这块布料. <br> <br>- 右键点击并拖动裁剪布料 <br> <br>- 如果反应滞后,则降低物理精度参数physics_accuracy <br> <br> </p> </div> <script type="text/javascript"> document.getElementById('close').onmousedown = function(e) { e.preventDefault(); document.getElementById('info').style.display = 'none'; return false; }; </script> <script type="text/javascript"> var physics_accuracy = 3, mouse_influence = 20, mouse_cut = 5, gravity = 1200, cloth_height = 30, cloth_width = 50, start_y = 20, spacing = 7, tear_distance = 60; window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; var canvas, ctx, cloth, boundsx, boundsy, mouse = { down: false, button: 1, x: 0, y: 0, px: 0, py: 0 }; var Point = function (x, y) { this.x = x; this.y = y; this.px = x; this.py = y; this.vx = 0; this.vy = 0; this.pin_x = null; this.pin_y = null; this.constraints = []; }; Point.prototype.update = function (delta) { if (mouse.down) { var diff_x = this.x - mouse.x, diff_y = this.y - mouse.y, dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y); if (mouse.button == 1) { if (dist < mouse_influence) { this.px = this.x - (mouse.x - mouse.px) * 1.8; this.py = this.y - (mouse.y - mouse.py) * 1.8; } } else if (dist < mouse_cut) this.constraints = []; } this.add_force(0, gravity); delta *= delta; nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta); ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta); this.px = this.x; this.py = this.y; this.x = nx; this.y = ny; this.vy = this.vx = 0 }; Point.prototype.draw = function () { if (this.constraints.length <= 0) return; var i = this.constraints.length; while (i--) this.constraints[i].draw(); }; Point..........完整代码请登录后点击上方下载按钮下载查看
网友评论0