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 < letters.length; i++) {
  chain.push({ letter: letters[i], x: 0, y: 0 });
}


/*--------------------
Resize
--------------------*/
const onResize = () => {
  win.w = window.innerWidth;
  win.h = window.innerHeight;
  canvas.width = win.w * devicePixelRatio;
  canvas.height = win.h * devicePixelRatio;
  canvas.style.width = `${win.w}px`;
  canvas.style.height = `${win.h}px`;
  ctx.scale(devicePixelRatio, devicePixelRatio);
};
onResize();


/*--------------------
MouseMove
--------------------*/
let isMouseMoving = false;
let timeoutID;
const onMouseMove = e => {
.........完整代码请登录后点击上方下载按钮下载查看