canvas鼠标悬停花丛中扒开放大交互效果代码
代码语言:html
所属分类:悬停
代码描述:canvas鼠标悬停花丛中扒开放大交互效果代码
代码标签: 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, a: 1.00 }, { r: 241, g: 151, b: 2, a: 1.00 }, { r: 247, g: 161, b: 3, a: 1.00 }, { r: 223, g: 123, b: 0, a: 1.00 }] }, { petalColors: [ { r: 255, g: 252, b: 221, a: 1.00 }, { r: 247, g: 246, b: 244, a: 1.00 }, { r: 255, g: 245, b: 255, a: 1.00 }], centerColors: [ { r: 255, g: 185, b: 4, a: 1.00 }, { r: 232, g: 165, b: 0, a: 1.00 }, { r: 220, g: 160, b: 4, a: 1.00 }, { r: 197, g: 150, b: 8, a: 1.00 }, { r: 201, g: 171, b: 119, a: 1.00 }] }, { petalColors: [ { r: 254, g: 221, b: 22, a: 1.00 }, { r: 231, g: 186, b: 0, a: 1.00 }, { r: 243, g: 213, b: 21, a: 1.00 }, { r: 227, g: 180, b: 0, a: 1.00 }, { r: 224, g: 191, b: 26, a: 1.00 }], centerColors: [ { r: 255, g: 255, b: 191, a: 1.00 }, { r: 247, g: 239, b: 94, a: 1.00 }, { r: 245, g: 224, b: 11, a: 1.00 }] }, { petalColors: [ { r: 207, g: 31, b: 166, a: 1.00 }, { r: 210, g: 10, b: 181, a: 1.00 }, { r: 218, g: 38, b: 205, a: 1.00 }, { r: 248, g: 0, b: 198, a: 1.00 }, { r: 192, g: 35, b: 153, a: 1.00 }], centerColors: [ { r: 247, g: 173, b: 252, a: 1.00 }, { r: 245, g: 144, b: 224, a: 1.00 }, { r: 223, g: 114, b: 199, a: 1.00 }, { r: 230, g: 89, b: 219, a: 1.00 }] }, { petalColors: [ { r: 123, g: 143, b: 255, a: 1.00 }, { r: 119, g: 128, b: 153, a: 1.00 }, { r: 118, g: 127, b: 248, a: 1.00 }, { r: 89, g: 112, b: 252, a: 1.00 }, { r: 79, g: 101, b: 200, a: 1.00 }], centerColors: [ { r: 96, g: 70, b: 206, a: 1.00 }, { r: 50, g: 37, b: 153, a: 1.00 }, { r: 65, g: 83, b: 255, a: 1.00 }, { r: 96, g: 70, b: 206, a: 1.00 }] }, { petalColors: [ { r: 107, g: 3, b: 0, a: 1.00 }, { r: 143, g: 1, b: 15, a: 1.00 }, { r: 187, g: 14, b: 0, a: 1.00 }, { r: 215, g: 24, b: 40, a: 1.00 }, { r: 237, g: 41, b: 53, a: 1.00 }], centerColors: [ { r: 141, g: 89, b: 75, a: 1.00 }, { r: 77, g: 40, b: 14, a: 1.00 }, { r: 78, g: 22, b: 5, a: 1.00 }, { r: 54, g: 5, b: 11, a: 1.00 }] }, { petalColors: [ { r: 219, g: 158, b: 43, a: 1.00 }, { r: 212, g: 140, b: 38, a: 1.00 }, { r: 207, g: 126, b: 34, a: 1.00 }], centerColors: [ { r: 111, g: 53, b: 15, a: 1.00 }, { r: 238, g: 191, b: 53, a: 1.00 }, { r: 236, g: 177, b: 59, a: 1.00 }] }, { petalColors: [ { r: 234, g: 206, b: 184, a: 1.00 }, { r: 215, g: 141, b: 140, a: 1.00 }, { r: 196, g: 47, b: 85, a: 1.00 }, { r: 178, g: 37, b: 45, a: 1.00 }], centerColors: [ { r: 116, g: 65, b: 0, a: 1.00 }, { r: 232, g: 186, b: 75, a: 1.00 }, { r: 229, g: 194, b: 126, a: 1.00 }] }, { petalColors: [ { r: 254, g: 252, b: 240, a: 1.00 }, { r: 242, g: 247, b: 241, a: 1.00 }], centerColors: [ { r: 238, g: 238, b: 42, a: 1.00 }, { r: 234, g: 209, b: 31, a: 1.00 }, { r: 179, g: 166, b: 28, a: 1.00 }] }, { petalColors: [ { r: 57, g: 36, b: 129, a: 1.00 }, { r: 129, g: 113, b: 188, a: 1.00 }, { r: 171, g: 173, b: 224, a: 1.00 }, { r: 241, g: 233, b: 255, a: 1.00 }], centerColors: [ { r: 21, g: 10, b: 76, a: 1.00 }, { r: 51, g: 34, b: 105, a: 1.00 }, { r: 80, g: 62, b: 120, a: 1.00 }] }]; //--- function init() { isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; //--- if (isTouchDevice === true) { canvas.addEventListener('touchmove', cursorMoveHandler, false); canvas.addEventListener('touchend', cursorLeaveHandler, false); canvas.addEventListener('touchcancel ', cursorLeaveHandler, false); } else { canvas.addEventListener('pointermove', cursorMoveHandler, false); canvas.addEventListener('pointerdown', cursorDownHandler, false); canvas.addEventListener('pointerup', cursorUpHandler, false); canvas.addEventListener('pointerleave', cursorLeaveHandler, false); } //--- const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; const bloomCount = Math.max(Math.min(Math.round(innerWidth * innerHeight * 0.000282), 512), 128); createBloomBackground(); createBlooms(bloomCount); //--- document.body.appendChild(canvas); window.addEventListener('resize', onResize, false); restart(); } function onResize(event) { restart(); } function restart() { const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; w = innerWidth; h = innerHeight; //--- canvas.width = w; canvas.height = h; imageData = context.getImageData(0, 0, w, h); data = imageData.data; //--- center.x = w / 2; center.y = h / 2; pointerPos.x = -10000; pointerPos.y = -10000; border.right = w; border.bottom = h; //--- removeDots(); addDots(); //--- if (animationFrame != null) { cancelAnimFrame(animationFrame); } render(); //--- initIntroPath(introPathCoordinatesCount); stopIntro(); playIntro(); } //--- function createBloomBackground(w = 128, h = 128) { const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const context = canvas.getContext('2d'); const imageData = context.getImageData(0, 0, w, h); const data = imageData.data; //--- for (let i = 0, l = data.length; i < l; i += 4) { data[i] = Math.floor(Math.random() * 25) + 25; data[i + 1] = Math.floor(Math.random() * 40) + 60; data[i + 2] = Math.floor(Math.random() * 5) + 5; data[i + 3] = 255; } context.putImageData(imageData, 0, 0); //--- bloomBackgroundImage = new Image(); bloomBackgroundImage.src = canvas.toDataURL(); } //--- function createBlooms(count = 512) { bloomHolder = []; //--- for (let i = 0, l = count; i < l; i++) { const colors = bloomColors[Math.floor(Math.random() * bloomColors.length)]; const diameter = Math.ceil(Math.random() * 15 + 15); const radius = diameter * 0.5; const numPetals = Math.floor(Math.random() * 7 + 4); const bloom = { diameter, radius, numPetals, petalLength: radius * 0.5, petalWidth: radius / numPetals, petalColors: colors.petalColors, centerColors: colors.centerColors, image: null }; bloom.image = createBloomImage(bloom.diameter, bloom.radius, bloom.numPetals, bloom.petalLength, bloom.petalWidth, bloom.petalColors, bloom.centerColors); bloomHolder.push(bloom); } } function createBloomImage(diameter, radius, numPetals, petalLength, petalWidth, petalColors, centerColors) { const centerX = radius; const centerY = radius; const canvas = document.createElement('canvas'); canvas.width = diameter; canvas.height = diameter; const context = canvas.getContext('2d'); //---- const addShadowBackground = () => { const gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); gradient.addColorStop(0.55, getRGBA(0, 0, 0, 255)); gradient.addColorStop(1.00, getRGBA(0, 0, 0, 0)); context.fillStyle = gradient; context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.fill(); }; const addPetals = (startAngle = 0, offsetAngle = 0) => { const petalColorsVariant = []; for (let i = 0, l = petalColors.length; i < l; i++) { const rgba = petalColors[i]; const rgbaVariant = addColorVariance(rgba, 40); petalColorsVariant.push(rgbaVariant); } for (let i = 0; i < numPetals; i++) { const petalLengthGradientOffset = Math.random() * 0.2 + 0.8; const petalLengthOffset = Math.random() * (radius * 0.08); const angle = startAngle + i * Math.PI * 2 / numPetals + offsetAngle; const x = centerX + Math.cos(angle) * petalLength; const y = centerY + Math.sin(angle) * petalLength; const xp = centerX + Math.cos(angle) * petalLength * petalLengthGradientOffset; const yp = centerY + Math.sin(angle) * petalLength * petalLengthGradientOffset; const gradientRadiusRandomOffsetInner = Math.random() * 0.33 + 0.25; const gradientRadiusRandomOffsetOuter = Math.random() * 0.25 + 0.75; const gradient = context.createRadialGradient(xp, yp, petalWidth * gradientRadiusRandomOffsetInner, xp, yp, radius * gradientRadiusRandomOffsetOuter); for (let j = 0, l = petalColorsVariant.length; j < l; j++) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0