js实现canvas发光粒子跟随鼠标喷射动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas发光粒子跟随鼠标喷射动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <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 round = Math.round,random = Math.random,PI = Math.PI;
    
    // Vector2
    ////////////////////////////////////
    var Vector2 = function () {
    	function Vector2() {var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;_classCallCheck(this, Vector2);
    		this.x = x;
    		this.y = y;
    	}_createClass(Vector2, [{ key: 'set', value: function set(
    		x, y) {this.x = x;this.y = y;} }, { key: 'add', value: function add(
    		v) {this.x += v.x;this.y += v.y;} }, { key: 'sub', value: function sub(
    		v) {this.x -= v.x;this.y -= v.y;} }, { key: 'mult', value: function mult(
    		v) {this.x *= v.x;this.y *= v.y;} }]);return Vector2;}();
    
    
    // Setup
    ////////////////////////////////////
    var 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: 3,
    	walls: true,
    	bounceX: 0.2,
    	bounceY: 0.2,
    	sideBounceX: 1,
    	windX: 0,
    	windY: 0,
    	type: 'optimized' };
    
    
    // Canvas
    ////////////////////////////////////
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');
    var body = document.body;
    var margin = 55;
    
    canvas.style.display = "block";
    body.style.backgroundColor = "black";
    body.style.margin = 0;
    body.appendChild(canvas);
    
    var width = canvas.width = window.innerWidth;
    var height = canvas.height = window.innerHeight - margin;
    
    // Canvas 2
    ////////////////////////////////////
    var canvas2 = document.createElement("canvas");
    var ctx2 = canvas2.getContext('2d');
    canvas2.height = canvas2.width = 150;
    
    // Particles
    ////////////////////////////////////
    var particles = [];
    var particleIndex = 0;
    var wind = new Vector2(setup.windX, setup.windY);var
    Particle = function () {
    	function Particle() {_classCallCheck(this, Particle);
    		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;
    	}_createClass(Particle, [{ key: 'update', value: function 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;
    						var 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;
    						var _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);
    					}
    				}
    			}
    		} }, { key: 'bounce', value: function 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;
    				}
    			}
    		} }, { key: 'optimizedShape', value: function optimizedShape(
    		x, y, radius) {
    			var innerRadius = 0.5 * radius;
    			var 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.fi.........完整代码请登录后点击上方下载按钮下载查看