canvas炫酷烟花绽放粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas炫酷烟花绽放粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { background-color: #000; color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } canvas { position:absolute; top:0; left:0 } </style> </head> <body> <canvas id="canvas"></canvas> <script > (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), width = 0, height = 0, vanishPointY = 0, vanishPointX = 0, focalLength = 300, angleX = 180, angleY = 180, angleZ = 180, angle = 0, cycle = 0, colors = {r : 255, g : 0, b : 0}, lastShot = new Date().getTime(); canvas.width = width; canvas.height = height; function drawStar(cx, cy, spikes, outerRadius, innerRadius) { var rot = Math.PI / 2 * 3; var x = cx; var y = cy; var step = Math.PI / spikes; ctx.strokeSyle = "#000"; ctx.beginPath(); ctx.moveTo(cx, cy - outerRadius) for (i = 0; i < spikes; i++) { x = cx + Math.cos(rot) * outerRadius; y = cy + Math.sin(rot) * outerRadius; ctx.lineTo(x, y) rot += step x = cx + Math.cos(rot) * innerRadius; y = cy + Math.sin(rot) * innerRadius; ctx.lineTo(x, y) rot += step } ctx.lineTo(cx, cy - outerRadius) ctx.closePath(); ctx.lineWidth=2; ctx.strokeStyle='goldenrod'; ctx.stroke(); ctx.fillStyle='yellow'; ctx.fill(); } /* * Controls the emitter */ function Emitter() { this.reset(); } Emitter.prototype.reset = function () { var PART_NUM = 200, x = (Math.random() * 400) - 200, y = (Math.random() * 400) - 200, z = (Math.random() * 800) - 200; this.x = x || 0; this.y = y || 0; this.z = z || 0; var color = [~~(Math.random() * 150) + 10, ~~(Math.random() * 150) + 10, ~~(Math.random() * 150) + 10] this.particles = []; for (var i = 0; i < PART_NUM; i++) { this.particles.push(new Particle(this.x, this.y, this.z, { r: colors.r, g: colors.g, b: colors.b })); } } Emitter.prototype.update = function () { var partLen = this.particles.length; angleY = (angle - vanishPointX) * 0.0001; angleX = (angle - vanishPointX) * 0.0001; this.particles.sort(function (a, b) { return b.z - a.z; }); for (var i = 0; i < partLen; i++) { this.particles[i].update(); } if(this.particles.length <= 0){ this.reset(); } }; Emitter.prototype.render = function (imgData) { var data = imgData.data; for (i = 0; i < this.particles.length; i++) { var particle = this.particles[i], dist = Math.sqrt((particle.x - particle.ox) * (particle.x - particle.ox) + (particle.y - particle.oy) * (particle.y - particle.oy) + (particle.z - particle.oz) * (particle.z - particle.oz)); if (dist > 255) { particle.render = false; thi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0