js canvas实现随机粒子特效

2024-09-30 03:45:39

本文实例为大家分享了js canvas随机粒子特效的具体代码，供大家参考，具体内容如下

前言

canvas实现前端的特效美术

结果展示

代码

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

/*
*粒子化类构造
    *类功能：
    *1.初始化。创建画布，规定粒子属性等；
    *2.创建图像并且进行绘制
    *3.区域颜色定义
    *4.粒子移动和偏射角度
*/

// 生成粒子
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动画实例之粒子文本的实现方法详解

1．粒子文本的实现原理粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子. 先在canvas1中用如下的语句绘制待显示的文本. ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canva
js实现三角形粒子运动

本文实例为大家分享了js实现三角形粒子运动的具体代码,供大家参考,具体内容如下效果(这里只是截了一个静态图,实际上里面的粒子是运动状态的): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
JavaScript实现鼠标移动粒子跟随效果

本文实例为大家分享了JavaScript实现鼠标移动粒子跟随效果的具体代码,供大家参考,具体内容如下 ※ 如上图是最终显示效果,跟随鼠标的移动,生成的粒子跟随. 需要用到的js库:Underscore.Underscore是一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:"如果我在一个空白的HTML页面前坐下,并希望立即开始工作,我需要什么?"...它弥补了部分jQuery没有实现的功能,同时又是Bac
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva
javascript Canvas动态粒子连线

好久没写博客了,最近负责了公司年会的大屏签到.滚动抽奖.节目投票,整个项目做下来有惊也有喜.期间用到了Canvas制作动画,我这边就简单做了个动态粒子连线的例子与大家分享. 一.效果图二.思路如下: 1.绘制随机区域的粒子,记录每个粒子x轴.y轴坐标以及x轴与y轴每次移动的距离 2.通过定时函数使得粒子进行移动,移动后判断是否超过界限,超过则将该粒子删除并生成一个新的粒子 3.判断所有粒子之间的距离,对给定距离的粒子进行连线. 三.代码如下: <!DOCTYPE html> <html
js实现3D粒子酷炫动态旋转特效

js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTEN
ThingJS粒子特效一键实现雨雪效果

使用ThingJS可以快速编写粒子效果,比如:下雨.下雪(可以控制雨雪大小).喷水.火焰效果等,甚至可以通过对接第三方的数据,实时控制三维场景的效果(比如:对接天气接口). 1.粒子效果 ThingJS 提供 ParticleSystem 物体类来实现粒子效果.自己制作粒子效果需要图片处理.写代码.3D渲染, 是个很艰巨的任务,需要掌握大量 3D 算法知识,还要掌握 shader 语言.ThingJS封装了粒子效果的实现方法,减少了代码量和开发投入,更受3D开发初学者的欢迎,直接用query查询
JS实现躲避粒子小游戏

本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下小项目的实战操作可以帮助我们更好的掌握javascript 躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度页面效果: 实现过程不积小流,无以成江海. 将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成.小绿球非水平非垂直方向的运动.小绿球碰撞容器内壁后弹性运动.生成多个小绿球.拖拽红球.红球的边界判断.红球与绿球的碰撞检测."坚持n秒&
使用3D引擎threeJS实现星空粒子移动效果

three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl
基于three.js实现的3D粒子动效实例代码

一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单个的运动,模拟出现真实的效果.three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作. (注:本文使用的关于three.js的API都是基于版本r98的.) 二.实现步骤 1. 创建渲染场景

js canvas实现随机粒子特效

相关推荐

随机推荐