本篇文章给大家分享的是有关怎么在JavaScript中使用canvas实现一个随机粒子特效，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
Java的特点有哪些
Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表，实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。2.Java具有简单性、面向对象、分布式、安全性、平台独立与可移植性、动态性等特点。3.使用Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script src="./main.js"></script></body></html>main.js
// 生成粒子let Particle = function(context, options){ let random = Math.random(); this.context = context; // 在画布里的x坐标 this.x = options.x; // 在画布里的y坐标 this.y = options.y; // 取随机数的1/2，对角度进行随机放大 this.s = 0.5 + Math.random(); // this.s = 1 + Math.random(); // 粒子运动的变化角度 this.a = 0; // 宽度 this.w = window.innerWidth; // 高度 this.h = window.innerHeight; // 半径 this.radius = options.radius || 0.5 + Math.random() * 10; // 颜色 this.color = options.color || "#E5483F"; // console.log(this.color); // 指定3秒后调用； // 如果粒子的半径大于0.5,加入新的粒子。 setTimeout(function(){ if(this.radius > 0.5){ particles.push( new Particle(context, { x: this.x, y: this.y, color: this.radius / 2 > 1 ? "#d6433b" : "#FFFFFF", radius: this.radius / 2.2 }) ); } }.call(Particle), 3000);};// 渲染图像Particle.prototype.render = function() { //从(0,0)开始新的路径； this.context.beginPath(); // 创建曲线弧 this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); // 绘图的线条宽度 this.context.lineWidth = 2; //颜色填充 this.context.fillStyle = this.color; // 填充当前图像的路径 this.context.fill(); // 返回初始点,并且绘制线条到初始位置 this.context.closePath();};Particle.prototype.swapColor = function() { // 排除白色 if (this.color != "#FFFFFF") { // 判断左右界面,并且赋颜色的值 if (this.x < this.w / 2) { // 左半边 this.color = "#36fcfa"; } else { // 右半边 this.color = "#E5483F"; } } };Particle.prototype.move = function() { // 颜色定义 this.swapColor(); // 横坐标按照cos角度进行变换，并且对其进行随机数放大； // 偏射角度以便两个半界分开 this.x += Math.cos(this.a) * this.s; this.y += Math.sin(this.a) * this.s; // this.y += Math.cos(this.a) * this.s; // this.x += Math.sin(this.a) * this.s; // 在变化后，对随机角度进行再重取； this.a += Math.random() * 0.8 - 0.4; // 判断全为0，粒子横坐标无移动； if (this.x < 0 || this.x > this.w - this.radius) { return false; } // 粒子纵坐标无移动； if (this.y < 0 || this.y > this.h - this.radius) { return false; } // 重新绘制图像 this.render(); return true; };let canvas = document.createElement('canvas');canvas.width = window.innerWidth - 20;canvas.height = window.innerHeight - 30;document.body.insertBefore(canvas, null);let context = canvas.getContext('2d');const conf = { frequency: 50, x: canvas.width, y: canvas.height};let particles = [], frequency = conf.frequency;setInterval(function(){ popolate();}.bind(null), frequency);function popolate(){ particles.push( new Particle(context, { x: conf.x / 2, y: conf.y / 2 }) ); return particles.length;}function clear() { context.globalAlpha = 0.04; context.fillStyle = '#000042'; context.fillRect(0,0,canvas.width, canvas.height); context.globalAlpha = 1;}function update(){ particles = particles.filter(p => p.move()); clear(); requestAnimationFrame(arguments.callee);}update();以上就是怎么在JavaScript中使用canvas实现一个随机粒子特效，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
