canvas交互水滴抖动动画效果-html代码-BFW代码库

canvas交互水滴抖动动画效果

代码语言：html

所属分类：动画

代码描述：canvas交互水滴抖动动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  height: 100%;
}

body {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background-image: -webkit-gradient(linear, left top, right top, from(#ffc3a0), to(#ffafbd));
  background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
}

canvas {
  height: 100%;
  width: 100%;
}

.copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}
.copy h1 {
  margin: 0;
  color: #6f86d6;
  letter-spacing: 1px;
  font-size: 6em;
  font-weight: 700;
  font-family: 'Futura', 'Helvetica Neue', Helvetica;
  background: -webkit-gradient(linear, left bottom, left top, from(#48c6ef), to(#6f86d6));
  background: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  background: -moz-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>
<div class="copy">
<h1>Orb</h1>
</div>

<script>
// Adapted from
// https://codepen.io/pekopekopeko/pen/PbYRWps

const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const pi = Math.PI;
const points = 12;
const radius = 200 * dpr;
const h = 600 * dpr;
const w = 600 * dpr;
const center = {
  x: w / 2 * dpr,
  y: h / 2 * dpr };

const circles = [];
const rangeMin = 1;
const rangeMax = 30;
const showPoints = true;

let mouseY = 0;
let tick = 0;

const gradient1 = ctx.createLinearGradient(0, 0, w, 0);
gradient1.addColorStop(0, '#96fbc4');
gradient1.addColorStop(1, '#f9f586');

const gradient2 = ctx.createLinearGradient(0, 0, w, 0);
gradient2.addColorStop(0, '#48c6ef');
gradient2.addColorStop(1, '#6f86d6');

const gradient3 = ctx.createLinearGradient(0, 0, w, 0);
gradient3.addColorStop(0, '#9795f0');
gradient3.addColorStop(1, '#9be15d');

const gradient4 = ctx.createLinearGradient(0, 0, w, 0);
gradient4.addColorStop(0, '#f6d365');
gradient4.addColorStop(1, '#fda085');

const gradients = [gradient1, gradient2, gradient3, gradient4];

window.addEventListener('mousemove', handleMove, true);

function handleMove(event) {
  mouseY = event.clientY;
}

ctx.scale(dpr, dpr);

el.width = w * dpr;
el.height = h * dpr;
el.style.width = w + 'px';
el.style.height = h + 'px';

// Setup swing circle points

for (var idx = 0; idx <= gradients.length - 1; idx++) {
.........完整代码请登录后点击上方下载按钮下载查看