canvas实现文字跟随鼠标动画效果代码-html代码-BFW代码库

canvas实现文字跟随鼠标动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现文字跟随鼠标动画效果代码

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

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

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

  
  
<style>
body {
  margin: 0;
  overflow: hidden;
  height: 100vh;
}
</style>



  
  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
  
      <script >
/*--------------------
Utils
--------------------*/
const scale = (v, x1, y1, x2, y2) => (v - x1) * (y2 - x2) / (y1 - x1) + x2;
const lerp = (a, b, t) => a + t * (b - a);

/*--------------------
Settings
--------------------*/
const settings = {
  backgroundColor: '#fff',
  letters: 'FOLLOW YOUR DREAM',
  minDistance: 14 };


/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const win = {
  w: window.innerWidth,
  h: window.innerHeight };

const mouse = {
  x: win.w / 2,
  y: win.h / 2 };

let time = 0;
const devicePixelRatio = window.devicePixelRatio || 1;
const chain = [];
const letters = settings.letters.split('').reverse();
for (let i = 0; i &l.........完整代码请登录后点击上方下载按钮下载查看