canvas实现鼠标跟随液态奶酪物体动画效果代码-html代码-BFW代码库

canvas实现鼠标跟随液态奶酪物体动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标跟随液态奶酪物体动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Kavoon");
* {
  box-sizing: border-box;
}

html, body {
  background: #333838;
  width: 100%;
  margin: 2px;
  overflow: hidden;
  cursor: move;
}

canvas {
  filter: url("#gooeyCottonCandy");
}
</style>

</head>
<body>

<canvas id='canv'></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="gooeyCottonCandy">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 100 -9"/>
    </filter>
  </defs>
</svg>
<!-- partial -->
  <script >
      var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var num = 1000;
var sd = 50;
var sp = 50;
var min_d = 100;
var msX = w * 0.5;
var msY = h * 0.5;
var dots, _pt;
var cols = ['#FFFCFE','#C4EAFF','#FFBDF7', '#D396FF'];

var rndCol = function() {
  var len = cols.length;
  var hues = Math.floor(Math.random() * len);
  return cols[hues];
}

var Pt = function(x, y) {
  this.x = 0;
  this.y = 0;
}

var pop = function() {
  dots = []; var g;
  for (var i = 0; i < num; i++) { 
    var _p = {
      x: (i % sd) * sp + 15,
      y: Math.floor(i / sd) * s.........完整代码请登录后点击上方下载按钮下载查看