canvas实现鼠标点击可产生水流涟漪波纹动画效果代码-html代码-BFW代码库

canvas实现鼠标点击可产生水流涟漪波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标点击可产生水流涟漪波纹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
body {
background:rgb(34, 0, 37);
margin:0;
overflow:hidden;
}
</style>



  
  
</head>


  <body>
<canvas id = "canvas">
</canvas>

  
      <script>
//This is a pressure based fluid sim that demonstrates mechanical wave motion.
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
can.width = window.innerWidth;
can.height = window.innerHeight;
var body = [];
var l = [];
var substeps = 2;
var click = false;
function randFrom(min, max) {
  //Returns a random number from minimum to maximum
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randBet(c1, c2) {
  //Returns a random element from two options
  var nArr = [c1, c2];
  return nArr[randFrom(0, 1)];
}
function norm(v) {
  var mag = Math.sqrt(v.x ** 2 + v.y ** 2);
  return { x: v.x / mag, y: v.y / mag };
}
function dot(v1, v2) {
  return v1.x * v2.x + v1.y * v2.y;
}
function dist(p1, p2) {
  return Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
}
function distSqrd(p1, p2) {
  return (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
}
var curveArray = [];
function curveVertex(px, py, context, active) {
  curveArray.push({ x: px, y: py });
  var length = curveArray.length;
  if (length == 4) {
    var tan1 = { x: (curveArray[2].x - curveArray[0].x) / 4, y: (curveArray[2].y - curveArray[0].y) / 4 };
    var tan2 = { x: (curveArray[1].x - curveArray[3].x) / 4, y: (curveArray[1].y - curveArray[3].y) / 4 };
    context.bezierCurveTo(curveArray[1].x + tan1.x, curveArray[1].y + tan1.y, curveArray[2].x + tan2.x, curveArray[2].y + tan2.y, curveArray[2].x, curveArray[2].y);
    curveArray.shift();
  } else if (length == 2) {
    context.moveTo(curveArray[1].x, curveArray[1].y);
  }
  if (a.........完整代码请登录后点击上方下载按钮下载查看