HTML5Canvas粒子球散落特效.zip资源-CSDN文库

共2个文件

js：1个

html：1个

41 浏览量 2023-11-02 22:58:47 上传评论收藏 17KB ZIP 举报

HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个“HTML5 Canvas粒子球散落特效”项目中，我们看到的是利用Canvas API创建的一种视觉效果，其中小球粒子从屏幕顶部散落而下，形成动态的动画场景。我们要理解Canvas的基本概念。HTML5的`<canvas>`元素提供了一个画布，开发者可以通过JavaScript来控制这个画布上的每一像素，实现复杂的图形绘制。在JavaScript中，我们通常会通过`document.createElement('canvas')`创建一个Canvas对象，并通过`getContext('2d')`获取2D渲染上下文，这个上下文提供了众多绘图方法，如`fillRect()`, `strokeRect()`, `beginPath()`, `arc()`, `moveTo()`, `lineTo()`等。在“粒子球散落特效”中，每个粒子球实际上都是由多个Canvas API调用组成的。我们需要定义粒子的属性，如位置、大小、颜色、速度和方向。然后，我们使用`requestAnimationFrame()`函数创建动画循环，每帧都更新粒子的状态并清除画布，再重新绘制所有粒子。`requestAnimationFrame()`确保了动画流畅且与浏览器刷新同步。为了实现散落的效果，粒子通常会在每次更新时改变其垂直速度，可能还会加上一些随机性，使其看起来更自然。此外，当粒子碰到画布边界时，它们可能会反弹或消失，这需要检测碰撞并相应地调整速度向量。在这个项目中，jQuery可能被用来简化DOM操作和事件处理，比如响应用户的滚动或点击事件来触发粒子散落。CSS特效可能用于处理非Canvas部分的样式，如背景颜色、过渡效果或布局。 CSS3的过渡和动画效果可以与Canvas结合，为整体效果增添更多维度。例如，可以通过CSS实现容器的透明度变化，或者当鼠标悬停时添加额外的视觉反馈。网页特效是吸引用户注意力和提升用户体验的重要手段。HTML5 Canvas粒子球散落特效展示了如何利用现代Web技术创建动态、互动的元素，使得网页更加生动有趣。这种特效在加载屏幕、背景动画或者用户交互反馈等方面都有广泛的应用。总结来说，"HTML5 Canvas粒子球散落特效"是一个结合了Canvas API、jQuery和CSS特效的实例，展示了如何通过编程技巧创造引人入胜的网页动态效果。开发者可以在此基础上进一步学习和创新，打造出更具个性化的交互体验。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas粒子球散落特效.zip （2个子文件）

jiaoben6805

dat.gui.min.js 55KB

index.html 10KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas粒子球散落特效 - 【更多源码：www.96flw.com】</title> </head> <body> <script src="js/dat.gui.min.js"></script> <div></div> <script> const { round, random, PI } = Math; // Vector2 //////////////////////////////////// class Vector2 { constructor(x = 0, y = 0) { this.x = x; this.y = y; } set(x, y) {this.x = x;this.y = y;} add(v) {this.x += v.x;this.y += v.y;} sub(v) {this.x -= v.x;this.y -= v.y;} mult(v) {this.x *= v.x;this.y *= v.y;}} // Setup //////////////////////////////////// let setup = { color: [0, 0, 255], mousePosition: true, size: 5, sizeReduction: .2, density: 20, trailOpacity: 0.1, gravity: .5, velocityX: 5, velocityY: 5, maximumLife: 50, probability: 30, walls: true, bounceX: 0.2, bounceY: 0.2, sideBounceX: 1, windX: 0, windY: 0, type: 'optimized' }; // Canvas //////////////////////////////////// const canvas = document.createElement("canvas"); const ctx = canvas.getContext('2d'); const body = document.body; const margin = 55; canvas.style.display = "block"; body.style.backgroundColor = "black"; body.style.margin = 0; body.appendChild(canvas); let width = canvas.width = window.innerWidth; let height = canvas.height = window.innerHeight - margin; // Canvas 2 //////////////////////////////////// const canvas2 = document.createElement("canvas"); const ctx2 = canvas2.getContext('2d'); canvas2.height = canvas2.width = 150; // Particles //////////////////////////////////// let particles = []; let particleIndex = 0; const wind = new Vector2(setup.windX, setup.windY); class Particle { constructor() { this.position = new Vector2(mouse.x, mouse.y); this.velocity = new Vector2(random() * (setup.velocityX * 2) - setup.velocityX, random() * (setup.velocityY * 2) - setup.velocityY); this.color = setup.color; this.size = this.size2 = 1; this.life = 0; this.id = particleIndex++; particles[this.id] = this; } update() { this.life++; if (this.life >= setup.maximumLife) { delete particles[this.id]; } else { this.velocity.sub(wind); this.position.add(this.velocity); this.bounce(); this.velocity.y += setup.gravity; if (setup.type == "optimized") { if (this.id & 1) { this.size += setup.sizeReduction; const fsize = setup.size / this.size * 7; ctx.drawImage(image, this.position.x - fsize / 2, this.position.y - fsize / 2, fsize, fsize); } else { this.size2 += setup.sizeReduction * 2; const fsize = setup.size / this.size2 * 7; ctx.drawImage(image, this.position.x - fsize / 2, this.position.y, fsize, fsize); } } else if (setup.type == "realistic") { if (this.id & 1) { this.size += setup.sizeReduction; this.realisticShape(this.position.x, this.position.y, setup.size / this.size); } else { this.size2 += setup.sizeReduction * 2; this.realisticShape(this.position.x, this.position.y, setup.size / this.size2); } } else { if (this.id & 1) { this.size += setup.sizeReduction; this.basicShape(this.position.x, this.position.y, setup.size / this.size); } else { this.size2 += setup.sizeReduction * 2; this.basicShape(this.position.x, this.position.y, setup.size / this.size2); } } } } bounce() { if (setup.walls) { if (this.position.y + setup.size >= height) { this.velocity.y *= -setup.bounceY; this.velocity.x *= setup.bounceX; this.position.y = height - setup.size; } else if (this.position.y + setup.size <= 0) { this.velocity.y *= -setup.bounceY; this.velocity.x *= setup.bounceX; this.position.y = setup.size; } else if (this.position.x - setup.size <= 0) { this.velocity.x *= -setup.sideBounceX; this.x = setup.size; } else if (this.position.x + setup.size >= width) { this.velocity.x *= -setup.sideBounceX; this.x = width - setup.size; } } } optimizedShape(x, y, radius) { const innerRadius = 0.5 * radius; const outerRadius = 3 * radius; ctx2.beginPath(); ctx2.fillStyle = `rgba(${this.color},.1)`; ctx2.arc(x, y, radius * 4, 0, Math.PI * 2, true); ctx2.closePath(); ctx2.fill(); ctx2.shadowColor = "white"; ctx2.shadowBlur = 55; ctx2.fill(); ctx2.beginPath(); ctx2.fillStyle = `rgba(${this.color},.1)`; ctx2.arc(x, y, radius * 2.1, 0, Math.PI * 2, true); ctx2.closePath(); ctx2.fill(); ctx2.shadowColor = "white"; ctx2.shadowBlur = 40; ctx2.fill(); ctx2.beginPath(); ctx2.fillStyle = `rgba(${this.color},.2)`; ctx2.arc(x, y, radius * 1.4, 0, Math.PI * 2, true); ctx2.closePath(); ctx2.fill(); const gradient = ctx2.createRadialGradient(x, y, innerRadius, x, y, outerRadius); gradient.addColorStop(0, 'rgb(255, 255, 255)'); gradient.addColorStop(1, `rgb(${this.color})`); ctx2.beginPath(); ctx2.fillStyle = gradient; ctx2.arc(x, y, radius, 0, Math.PI * 2); ctx2.closePath(); ctx2.fill(); ctx2.shadowColor = "white"; ctx2.shadowBlur = 55; ctx2.fill(); } realisticShape(x, y, radius) { const innerRadius = 0.5 * radius; const outerRadius = 1.6 * radius; ctx.beginPath(); ctx.fillStyle = `rgba(${this.color},.1)`; ctx.arc(x, y, radius * 4, 0, PI * 2, true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.fillStyle = `rgba(${this.color},.2)`; ctx.arc(x, y, radius * 2.1, 0, PI * 2, true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.fillStyle = `rgba(${this.color},.2)`; ctx.arc(x, y, radius * 1.4, 0, PI * 2, true); ctx.closePath(); ctx.fill(); const gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius); gradient.addColorStop(0, 'rgb(255, 255, 255)'); gradient.addColorStop(1, `rgb(${this.color})`); ctx.beginPath(); ctx.fillStyle = gradient; ctx.arc(x, y, radius, 0, PI * 2); ctx.closePath(); ctx.fill(); ctx.shadowColor = "white"; ctx.shadowBlur = 5; } basicShape(x, y, radius) { const innerRadius = 0.5 * radius; const outerRadius = 1.6 * radius; ctx.beginPath(); ctx.fillStyle = `rgba(${this.color},1)`; ctx.arc(x, y, radius, 0, PI * 2); ctx.closePath(); ctx.fill(); }} // Events //////////////////////////////////// let savePos = new Vector2(width / 2, height / 2); let mouse = new Vector2(savePos.x, savePos.y); canvas.addEventListener('mousemove', function (e) { if (setup.mousePosition) { mouse.set(e.clientX, e.clientY); } }, false); canvas.addEventListener('mouseout', function (e) { mouse.set(savePos.x, savePos.y); }, false); canvas.addEventListener('click', function (e) { mouse.x = savePos.x = e.clientX; mouse.y = savePos.y = e.clientY; }, false); window.addEventListener('resize', function (e) { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight - margin; mouse.x = savePos.x = width / 2; mouse.y = savePos.y = height / 2; console.log(mouse / 2); }, false); // Gui //////////////////////////////////// function setRGB(array) { for (let i in array) { array[i] = round(array[i]); } } const gui = new dat.GUI(); gui.addColor(setup, 'color').onChange(function () { setRGB(setup.color); ctx2.clearRect(0, 0, canvas2.width, canvas2.height); optimizedParticle.color = setup.color; optimizedParticle.optimizedShape(canvas2.width / 2, canvas2.height / 2, 18); image.src =

评论收藏

内容反馈