canvas鼠标悬停花丛中扒开放大交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：canvas鼠标悬停花丛中扒开放大交互效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
/*
global
*/
*, *::before, *::after {
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;
}

*:focus {
		outline: none;
}

body {
		height: 100vh;
		background-color: rgb( 30, 60, 0 );
		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, alpha: false });

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 pointerDownButton = -1;
let pointerMoveTimeout;

const pointerMoveTimeoutTime = 2500;

//---

const dotColorR = 25;
const dotColorG = 155;
const dotColorB = 0;
const dotColorA = 255;
const dotsRadius = 4;
const dotsDistance = 10;
const dotDistanceInit = 10000000;
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 = 0;
const dotsMinPositionOffset = 0;
const dotsMaxPositionOffset = 10;

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

let bloomBackgroundImage = null;
let bloomHolder = [];
const bloomColors = [

{
  petalColors: [
  { r: 215, g: 157, b: 0, a: 1.00 },
  { r: 250, g: 221, b: 5, a: 1.00 }],

  centerColors: [
  { r: 27, g: 9, b: 0, a: 1.00 },
  { r: 101, g: 32, b: 0, a: 1.00 },
  { r: 74, g: 26, b: 0, a: 1.00 }] },



{
  petalColors: [
  { r: 226, g: 209, b: 240, a: 1.00 },
  { r: 247, g: 107, b: 239, a: 1.00 }],

  centerColors: [
  { r: 157, g: 103, b: 19, a: 1.00 },
  { r: 123, g: 72, b: 12, a: 1.00 },
  { r: 33, g: 11, b: 11, a: 1.00 }] },



{
  petalColors: [
  { r: 193, g: 2, b: 16, a: 1.00 },
  { r: 247, g: 48, b: 24, a: 1.00 },
  { r: 250, g: 76, b: 27, a: 1.00 }],

  centerColors: [
  { r: 80, g: 52, b: 30, a: 1.00 },
  { r: 65, g: 36, b: 19, a: 1.00 },
  { r: 54, g: 3, b: 2, a: 1.00 }] },



{
  petalColors: [
  { r: 206, g: 213, b: 224, a: 1.00 },
  { r: 194, g: 195, b: 215, a: 1.00 },
  { r: 220, g: 224, b: 239, a: 1.00 }],

  centerColors: [
  { r: 239, g: 211, b: 104, a: 1.00 },
  { r: 205, g: 165, b: 31, a: 1.00 },
  { r: 192, g: 193, b: 35, a: 1.00 },
  { r: 145, g: 149, b: 0, a: 1.00 },
  { r: 83, g: 86, b: 24, a: 1.00 }] },



{
  petalColors: [
  { r: 61, g: 24, b: 116, a: 1.00 },
  { r: 70, g: 26, b: 130, a: 1.00 },
  { r: 93, g: 84, b: 210, a: 1.00 },
  { r: 102, g: 110, b: 241, a: 1.00 },
  { r: 107, g: 115, b: 249, a: 1.00 },
  { r: 89, g: 96, b: 235, a: 1.00 },
  { r: 67, g: 76, b: 232, a: 1.00 }],

  centerColors: [
  { r: 0, g: 4, b: 14, a: 1.00 },
  { r: 34, g: 31, b: 89, a: 1.00 },
  { r: 73, g: 68, b: 156, a: 1.00 },
  { r: 46, g: 29, b: 118, a: 1.00 },
  { r: 23, g: 9, b: 55, a: 1.00 }] },



{
  petalColors: [
  { r: 35, g: 42, b: 99, a: 1.00 },
  { r: 63, g: 86, b: 208, a: 1.00 },
  { r: 112, g: 180, b: 252, a: 1.00 },
  { r: 82, g: 146, b: 252, a: 1.00 }],

  centerColors: [
  { r: 146, g: 146, b: 123, a: 1.00 },
  { r: 101, g: 99, b: 86, a: 1.00 },
  { r: 71, g: 67, b: 61, a: 1.00 },
  { r: 60, g: 56, b: 53, a: 1.00 },
  { r: 36, g: 28, b: 59, a: 1.00 }] },



{
  petalColors: [
  { r: 255, g: 180, b: 9, a: 1.00 },
  { r: 245, g: 148, b: 3, a: 1.00 },
  { r: 235, g: 120, b: 4, a: 1.00 },
  { r: 233, g: 106, b: 6, a: 1.00 },
  { r: 239, g: 119, b: 7, a: 1.00 },
  { r: 246, g: 145, b: 9, a: 1.00 }],

  centerColors: [
  { r: 206, g: 154, b: 12, a: 1.00 },
  { r: 232, g: 162, b: 8, .........完整代码请登录后点击上方下载按钮下载查看