html5 玻璃破碎,HTML5/Canvas玻璃裂纹特效 | 粒子轨迹

妖狐艹你老母 2022-10-08 00:40 222阅读 0赞

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/\*\*/ /\* ---- CORE ---- \*/

/\*\*/ const canvas = document.createElement('canvas');

/\*\*/ const context = canvas.getContext('2d');

/\*\*/ let windowWidth = canvas.width = window.innerWidth;

/\*\*/ let windowHeight = canvas.height = window.innerHeight;

/\*\*/ canvas.id = 'canvas';

/\*\*/ document.body.insertBefore(canvas, document.body.firstChild);

/\*\*/ /\* ---- CORE END ---- \*/

/\* ---- CREATING ZONE ---- \*/

/\* ---- SETTINGS ---- \*/

const numberParticlesStart = 1000;

const particleSpeed = 0.3;

const velocity = 0.9;

const circleWidth = 50;

/\* ---- INIT ---- \*/

let particles = \[\];

const getRandomFloat = (min, max) => (Math.random() \* (max - min) + min);

/\* ---- Particle ---- \*/

function Particle (x, y) \{

this.x = x;

this.y = y;

this.vel = \{

x : getRandomFloat(-20, 20)/100,

y : getRandomFloat(-20, 20)/100,

min : getRandomFloat(2, 10),

max : getRandomFloat(10, 100)/10

this.color = 'rgba(255, 255, 255, 0.05)';

Particle.prototype.render = function() \{

context.beginPath();

context.fillStyle = this.color;

context.arc(this.x, this.y, 1, 0, Math.PI \* 2);

context.fill();

\};

Particle.prototype.update = function() \{

const forceDirection = \{

x: getRandomFloat(-1, 1),

y: getRandomFloat(-1, 1),

\};

if (Math.abs(this.vel.x + forceDirection.x) < this.vel.max) \{

this.vel.x += forceDirection.x;

if (Math.abs(this.vel.y + forceDirection.y) < this.vel.max) \{

this.vel.y += forceDirection.y;

this.x += this.vel.x \* particleSpeed;

this.y += this.vel.y \* particleSpeed;

if (Math.abs(this.vel.x) > this.vel.min) \{

this.vel.x \*= velocity;

if (Math.abs(this.vel.y) > this.vel.min) \{

this.vel.y \*= velocity;

this.testBorder();

\};

Particle.prototype.testBorder = function() \{

if (this.x > windowWidth) \{

this.setPosition(this.x, 'x');

\} else if (this.x < 0) \{

this.setPosition(windowWidth, 'x');

if (this.y > windowHeight) \{

this.setPosition(this.y, 'y');

\} else if (this.y < 0) \{

this.setPosition(windowHeight, 'y');

\};

Particle.prototype.setPosition = function(pos, coor) \{

if (coor === 'x') \{

this.x = pos;

\} else if (coor === 'y') \{

this.y = pos;

\};

/\* ---- Functions ----\*/

function loop() \{

let i;

const length = particles.length;

for (i = 0; i < length; i++) \{

particles\[i\].update();

particles\[i\].render();

requestAnimationFrame(loop);

/\* ---- START ---- \*/

function init() \{

let i;

for (i = 0; i < numberParticlesStart; i++) \{

const angle = Math.random() \* 360;

particles.push(new Particle(

windowWidth \* 0.5 + (Math.cos(angle) \* circleWidth),

windowHeight \* 0.5 - (Math.sin(angle) \* circleWidth),

));

init();

window.onresize = () => \{

windowWidth = canvas.width = window.innerWidth;

windowHeight = canvas.height = window.innerHeight;

particles = \[\];

context.clearRect(0,0, windowWidth, windowHeight);

init();

window.addEventListener('click', () => \{

particles = \[\];

context.clearRect(0,0, windowWidth, windowHeight);

init();

\});

loop();

html5 玻璃破碎,HTML5/Canvas玻璃裂纹特效 | 粒子轨迹

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【HTML】html5 canvas全屏烟花动画特效

相关九、HTML5空间粒子背景动画特效

相关 html5 玻璃破碎,HTML5/Canvas玻璃裂纹特效 | 粒子轨迹

相关 html5 canvas word,HTML5 Canvas

相关用html做龙卷风特效,HTML5/Canvas 彩色龙卷风

相关 HTML5球体下落粒子爆炸js特效

相关 Canvas黑色背景粒子HTML5动画

相关 HTML5霓虹灯粒子螺旋动画js特效

相关 HTML5Canvas

相关【HTML5】——Canvas