html5+canvas实现网页点击彩色粒子爆炸动画特效源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

88 浏览量 2022-11-03 23:40:54 上传评论收藏 4KB ZIP 举报

HTML5是下一代Web标准，它引入了许多新的特性和API，极大地丰富了网页开发的可能性。Canvas是HTML5中的一个核心元素，允许动态、程序化地在网页上绘制图形。在这个"html5+canvas实现网页点击彩色粒子爆炸动画特效源码.zip"压缩包中，我们很显然会看到一个使用HTML5 Canvas技术创建的互动粒子爆炸特效。让我们深入了解一下HTML5 Canvas。Canvas是一个基于矢量图形的画布，开发者可以通过JavaScript来控制它的每一像素。通过调用Canvas API提供的方法，如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等，可以绘制出复杂的图形和动画。在这个项目中，关键的技术点包括： 1. **事件监听**：HTML5提供了`addEventListener()`方法，用于监听用户的点击事件。当用户点击网页时，会触发相应的函数，启动粒子爆炸动画。 2. **粒子系统**：粒子系统是一种常见的计算机图形学技术，用于模拟复杂的效果，如火焰、烟雾、爆炸等。在这里，每个粒子可能代表一个小色块，它们根据预设的运动规律和颜色变化规则进行动画展示。 3. **Canvas绘图**：在用户点击的位置，代码会生成大量随机分布的粒子，并赋予它们不同的速度、方向和生命周期。然后，利用`requestAnimationFrame()`函数创建连续的动画帧，每帧更新粒子的位置、颜色和透明度，实现粒子爆炸的效果。 4. **颜色处理**：动画中的“彩色”部分可能涉及到随机颜色生成，或者某种颜色过渡算法，让粒子呈现出丰富多彩的视觉效果。 5. **性能优化**：由于粒子数量可能很大，为了保持流畅的动画效果，可能采用了批量绘制技术，将多个粒子一次性渲染到Canvas上，而不是逐个绘制。 6. **重绘策略**：可能会有智能的重绘策略，比如只更新移动的粒子或改变状态的粒子，而不是整个Canvas，这有助于减少不必要的计算和提高性能。 7. **交互性**：用户每次点击都能触发新的粒子爆炸，这需要在事件处理函数中添加逻辑，确保动画的正确启动和结束。通过这个源码，开发者可以学习到如何利用HTML5 Canvas结合JavaScript来创建动态、交互式的网页特效。这个技术不仅可以应用于娱乐性的动画，也可以在数据可视化、游戏开发等领域发挥重要作用。如果你对前端开发感兴趣，这是一个很好的实践和学习素材，可以帮助你提升在HTML5和Canvas上的技能。

资源推荐

资源详情

资源评论

收起资源包目录

html5+canvas实现网页点击彩色粒子爆炸动画特效源码.zip （1个子文件）

132688027061815702

likecs.com_132688027068582188

index.html 13KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>五彩纸屑射击</title> <style> body { width: 100vw; min-height: 100vh; font-family: 'Inconsolata', monospace; overflow: hidden; } #canvas { display: block; cursor: pointer; } .hint { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; visibility: hidden; -webkit-animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards; animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards; } .hint > h1 { font-size: 32px; color: #fff; } @-webkit-keyframes fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @-webkit-keyframes fade-out { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes fade-out { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } </style> </head> <body> <canvas id="canvas"></canvas> <div class="hint" id="hint"> <h1>Click.</h1> </div> <script> var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var getRandom = function getRandom(min, max) { return Math.random() * (max - min) + min; }; var getRandomInt = function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; }; var getRandomColor = function getRandomColor() { var colors = [ 'rgba(231, 76, 60, 1)', // red 'rgba(241, 196, 15, 1)', // yellow 'rgba(46, 204, 113, 1)', // green 'rgba(52, 152, 219, 1)', // blue 'rgba(155, 89, 182, 1)' // purple ]; return colors[getRandomInt(0, colors.length)]; }; // Particle var Particle = function () { function Particle(system, x, y) {_classCallCheck(this, Particle); this.system = system; this.universe = this.system.world.universe; this.x = x; this.y = y; this.color = getRandomColor(); this.life = 1; this.aging = getRandom(0.99, 0.999); // 0.99, 0.999 || 0.999, 0.9999 this.r = getRandomInt(8, 16); this.speed = getRandom(3, 8); this.velocity = [ getRandom(-this.speed, this.speed), getRandom(-this.speed, this.speed)]; }_createClass(Particle, [{ key: 'update', value: function update( dt) { this.life *= this.aging; if ( this.r < 0.1 || this.life === 0 || this.x + this.r < 0 || this.x - this.r > this.universe.width || this.y + this.r < 0 || this.y - this.r > this.universe.height) { this.system.removeObject(this); } this.r *= this.life; this.x += this.velocity[0]; this.y += this.velocity[1]; } }, { key: 'render', value: function render( ctx) { // Main circle ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); var r = this.color.match(/([0-9]+)/g)[0]; var g = this.color.match(/([0-9]+)/g)[1]; var b = this.color.match(/([0-9]+)/g)[2]; // Gradient var spread = 1.5; var gradient = ctx.createRadialGradient( this.x, this.y, this.r, this.x, this.y, this.r * spread); gradient.addColorStop(0, 'rgba(' + r + ', ' + g + ', ' + b + ', 0.3)'); gradient.addColorStop(1, 'rgba(' + r + ', ' + g + ', ' + b + ', 0)'); ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.x, this.y, this.r * spread, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); ctx.globalCompositeOperation = 'source-over'; // Aberration var offset = this.r * 0.5; var color = 'rgba(' + g + ', ' + b + ', ' + r + ', 0.3)'; ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(this.x + offset, this.y + offset, this.r, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); ctx.globalCompositeOperation = 'source-over'; } }]);return Particle;}(); // Crown var Crown = function () { function Crown(system, x, y) {_classCallCheck(this, Crown); this.system = system; this.x = x; this.y = y; this.r = getRandomInt(15, 20); // 5, 20 this.mod = 1.1; this.life = 1; this.aging = getRandom(0.83, 0.88); this.speed = getRandom(4, 5); this.color = { r: getRandomInt(236, 242), g: getRandomInt(196, 241), b: getRandomInt(195, 242) }; this.angle1 = Math.PI * getRandom(0, 2); this.angle2 = this.angle1 + Math.PI * getRandom(0.1, 0.5); }_createClass(Crown, [{ key: 'update', value: function update( dt) { this.life *= this.aging; if (this.life <= 0.0001) this.system.removeObject(this); this.r += Math.abs(1 - this.life) * this.speed; this.x1 = this.x + this.r * Math.cos(this.angle1); this.y1 = this.y + this.r * Math.sin(this.angle1); this.angle3 = this.angle1 + (this.angle2 - this.angle1) / 2; this.x2 = this.x + this.r * this.mod * Math.cos(this.angle3); this.y2 = this.y + this.r * this.mod * Math.sin(this.angle3); } }, { key: 'render', value: function render( ctx) { var gradient = ctx.createRadialGradient( this.x, this.y, this.r * 0.9, this.x, this.y, this.r); gradient.addColorStop(0, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life + ')'); gradient.addColorStop(1, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life * 0.5 + ')'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, this.angle1, this.angle2, false); ctx.quadraticCurveTo(this.x2, this.y2, this.x1, this.y1); ctx.fill(); ctx.closePath(); } }]);return Crown;}(); // Explosion var Explosion = function () { function Explosion(world, x, y) {_classCallCheck(this, Explosion); this.world = world; this.x = x; this.y = y; this.objects = []; var particles = getRandomInt(30, 80); // 10, 30 amount of particles var crowns = particles * getRandom(0.3, 0.5); while (crowns-- > 0) {this.addCrown();} while (particles-- > 0) {this.addParticle();} }_createClass(Explosion, [{ key: 'update', value: function update( dt) { this.objects.forEach(function (obj) { if (obj) obj.update(dt); }); if (this.objects.length <= 0) { this.world.clearExplosion(this); } } }, { key: 'render', value: function render( ctx) { this.objects.forEach(function (obj) { if (obj) obj.render(ctx); }); } }, { key: 'addCrown', value: function addCrown()

评论收藏

内容反馈

版权申诉