canvas鼠标交互粒子动画效果代码-html代码-BFW代码库

canvas鼠标交互粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas鼠标交互粒子动画效果代码

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

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

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

    
  
  
<style>
/*
global
*/
@import url(//fonts.googleapis.com/css?family=Open+Sans);

*, *::before, *::after {
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;
}

*:focus {
		outline: none;
}

body {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background: radial-gradient(#202020, #000000);
		overflow: hidden;
}

canvas {
		touch-action: none;
}
</style>

  
  
</head>

<body translate="no">
  
  
      <script  >
//---

'use strict';

//---

console.clear();

//---

let w = 0;
let h = 0;
let initialWidth = w;
let initialHeight = h;

let animationFrame = null;
let isTouchDevice = false;

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d', { willReadFrequently: true });

let imageData = null;
let data = null;

const center = { x: w / 2, y: h / 2 };
const border = { left: 1, top: 1, right: w, bottom: h };

let pointerPos = { x: center.x, y: center.y };
let pointerDown = false;
let pointerMoveTimeout;

const pointerMoveTimeoutTime = 2500;

//---

const text = [

{ text: '250', x: 0, y: 0, ox: 0, oy: 0, offsetX: 0, offsetY: -60, fontSizeFactor: 2.25, fontWeight: 'bold', fontSize: 0 },
{ text: 'FOLLOWERS', x: 0, y: 0, ox: 0, oy: 0, offsetX: 0, offsetY: 180, fontSizeFactor: 8.5, fontWeight: 'bold', fontSize: 0 }];



const dotsCountMax = 20164;
const dotsRadius = 3;
const dotsDistance = 0;
const dotsDiameter = dotsRadius * 2;
const dotsSpeed = 10;
const dotsWobbleFactor = 0.95;
const dotsWobbleSpeed = 0.05;
const dotsMaxEscapeRouteLengthBasis = 100;
let dotsMaxEscapeRouteLength = 100;
const dotsMouseDistanceSensitivitySpeed = 5;
const dotsMouseDistanceSensitivityMax = 250;
const dotsMouseDistanceSensitivityMinBasis = 100;
let dotsMouseDistanceSensitivityMin = 100;
let dotsMouseDistanceSensitivity = dotsMouseDistanceSensitivityMin;
let dotsHolder = [];
let dotsCount = dotsCountMax;

let introPath = [];
let introInterval = null;
let introIndex = 0;
let introPathCoordinatesCount = 256;
let introSpeedBasis = 10;
let introSpeed = introSpeedBasis;


//---

function init() {

  isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

  //---

  if (isTouchDevice === true) {

    canvas.addEventLi.........完整代码请登录后点击上方下载按钮下载查看