js实现canvas可交互点击的液体水流融合动画模拟效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas可交互点击的液体水流融合动画模拟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; overflow:hidden; } body { background:#333; } #reset { position: absolute; left:50%; top:10px; margin-left:-400px; background: #444; border: 1px solid #555; color: #888; padding: 6px 10px; cursor: pointer; opacity: 0.8; } #c { width:800px; height:376px; margin:0 auto; display:block; } #info { position:absolute; left:-1px; top:-1px; width:auto; max-width:380px; height:auto; background:#f2f2f2; border-bottom-right-radius:10px; } #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; } #close { float:right; margin: 10px; } </style> </head> <body> <canvas id="c"> </canvas> <button id="reset">new colours</button> <div id="info"> <div id="top"> <a id="close" href="">close</a> </div> <p> <br> - Alter particles/groups with the GROUPS variable.<br><br> - Customize colours with GROUP_COLOURS.<br><br> - Use the mouse to move the fluid.<br><br> - Click anywhere to make water.<br><br> - Use one group for a more water-like effect.<br><br> </p> </div> <script> document.getElementById('close').onmousedown = function (e) { e.preventDefault(); document.getElementById('info').style.display = 'none'; return false; }; /* Settings */ var MOUSE_INFLUENCE = 5, GRAVITY_X = 0, GRAVITY_Y = 0, MOUSE_REPEL = false, GROUPS = [50, 50, 50], GROUP_COLOURS = ['rgba(97,160,232']; window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; var fluid = function () { var ctx,width,height,num_x,num_y,particles,grid,meta_ctx,threshold = 220,play = false,spacing = 45,radius = 30,limit = radius * 0.66,textures,num_particles; var mouse = { down: false, x: 0, y: 0 }; var process_image = function () { var imageData = meta_ctx.getImageData(0, 0, width, height), pix = imageData.data; for (var i = 0, n = pix.length; i < n; i += 4) { pix[i + 3] < threshold && (pix[i + 3] /= 6); } ctx.putImageData(imageData, 0, 0); }; var run = function () { //var time = new Date().getTime(); meta_ctx.clearRect(0, 0, width, height); for (var i = 0, l = num_x * num_y; i < l; i++) grid[i].length = 0; var i = num_particles; while (i--) particles[i].first_process(); i = num_particles; while (i--) particles[i].second_process(); process_image(); if (mouse.down) { ctx.canvas.style.cursor = 'none'; ctx.fillStyle = 'rgba(97, 160, 232, 0.05)'; ctx.beginPath(); ctx.arc( mouse.x, mouse.y, radius * MOUSE_INFLUENCE, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgba(97, 160, 232, 0.05)'; ctx.beginPath(); ctx.arc( mouse.x, mouse.y, radius * MOUSE_INFLUENCE / 3, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } else ctx.canvas.style.cursor = 'default'; //console.log(new Date().getTime() - time); if (play) requestAnimFrame(run); }; var Particle = function (type, x, y) { this.type = type; this.x = x; this.y = y; this.px = x; this.py = y; this.vx = 0; this.vy = 0; }; Particle.prototype.first_process = function () { var g = grid[Math.round(this.y / spacing) * num_x + Math.round(this.x / spacing)]; if (g) g.close[g.length++] = this; this.vx = this.x - this.px; this.vy = this.y - this.py; if (mouse.down) { var dist_x = this.x - mouse.x; var dist_y = this.y - mouse.y; var dist = Math.sqrt(dist_x * dist_x + dist_y * dist_y); if (dist < radius * MOUSE_INFLUENCE) { var cos = dist_x / dist; var sin = dist_y / dist; this.vx += MOUSE_REPEL ? cos : -cos; this.vy += MOUSE_REPEL ? sin : -sin; } } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0