canvas可交互液态文本悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:canvas可交互液态文本悬浮效果代码,文字像水滴一样,鼠标悬浮还会移动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow: hidden; background: #ffaaaa; } #canvas1 { position: absolute; width: 1200px; heigth: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: url("#goo"); border: 1px solid white; } footer, article { font-family: monospace; position: absolute; width: 100%; color: white; font-size: 15px; text-shadow: 1px 1px 1px #737373; background: rgba(255,255,255,0.4); } footer { left: 0; bottom: 0; width: 100%; text-align: center; height: 30px; line-height: 30px; padding-right: 20px; } footer a{ color: white; } article { top: 10px; z-index: 100; width: 50%; max-width: 350px; font-size: 15px; color: white; padding: 20px; border-radius: 0 0 5px 0; } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas1"></canvas> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs> </svg> <article> <br> </article> <!-- partial --> <script> const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext("2d"); canvas.width = 1200; canvas.height = 600; let particleArray = []; let adjustX = -10; let adjustY = 3; // get mouse mouse position // let mouse = { x: null, y: null, radius: 150 } let canvasPosition = canvas.getBoundingClientRect(); window.addEventListener('mousemove', function(e){ mouse.x = e.x - canvasPosition.left; mouse.y = e.y - canvasPosition.top; }); ctx.font = 'bold 11px Verdana'; ctx.fillText('BFW.WIKI', 2, 20); const data = ctx.getImageData(0, 0, canvas.width, 100); class Particle { constructor(x, y){ this.x = x + 200, this.y = y - 100, this.size = 4, this.baseX = this.x, this.baseY = this.y, this.density = ((Math.random() * 20) + 1); } draw() { ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } update() { // check mouse position/particle position - collision detection let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx*dx + dy*dy); let forceDirectionX = dx / distance; let forceDirectionY = dy / distance; // distance past which the force is zero var maxDistance = mouse.radius; // convert (0...maxDistance) range into a (1...0). // Close is near 1, far is near 0 // for example: // 250 => 0.75 // 100 => 0.9 // 10 => 0.99 var force = (maxDistance - distance) / maxDistance; // if we went below zero, set it to zero. if (force < 0) force = 0; let directionX .........完整代码请登录后点击上方下载按钮下载查看
网友评论0