这个也是别人的代码，就不多介绍了

写了些注释

body {

	overflow:hidden;

	margin:0;

	padding:0;

	background-color:#222222

}

</style>

</head>

<body>

<canvas id="canvasParticle">Canvas is not supported in your brower.</canvas><script>

window.onload = function() {

    var oCanvas = document.getElementById('canvasParticle');

    var cxt = null;

    //用来存放粒子的素组

    var particles = {};

    var particleIndex = 0;

    if (oCanvas.getContext) {

        cxt = oCanvas.getContext('2d');

    }

    oCanvas.width = window.innerWidth;

    oCanvas.height = window.innerHeight;

    function Particle() {

        particleIndex++;

        particles[particleIndex] = this;

        //粒子放射的中心点

        this.x = oCanvas.width / 2;

        this.y = oCanvas.height / 2;

        //初始化粒子沿X轴和Y轴的速度

        this.vx = Math.random() * 6 - 3;

        this.vy = Math.random() * 4 - 2;

        this.growth = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01; // 根据x/y轴的位置决定大小

        this.id = particleIndex;

        this.size = 0;

        this.color = getRandomColor();

    };

    Particle.prototype.draw = function() {

        this.x += this.vx;

        this.y += this.vy;

        //根据移动的距离逐渐变大

        this.size += this.growth;

        if (this.x < 0 || this.x > oCanvas.width || this.y < 0 || this.y > oCanvas.height) {

            //出界则移除

            delete particles[this.id];

        }

        cxt.fillStyle = this.color;

        cxt.beginPath();

        cxt.arc(this.x, this.y, this.size, 0, 2 * Math.PI);

        cxt.fill();

    };

    function animate() {

        requestAnimationFrame(animate);

        cxt.fillStyle = '#222222';

        cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);

        //每次网数组添加一个数据

        new Particle();

        //遍历数组，依次画出

        for (var i in particles) {

            particles[i].draw();

        }

    };

    requestAnimationFrame(animate);

};

//随机颜色方法

function getRandomColor() {

    return '#' + (Math.random() * 0xffffff << 0).toString(16);

};</script>

</body>

canvas放射粒子效果的更多相关文章

  1. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  2. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  3. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

  4. canvas实现的粒子效果

    前言:我的这个share很简单,没什么技术水准,主要是我自己觉得canvas这个标签很cool!,简单实用又能装X,而且又能实现很多看起来很炫的东西. 一 关于canvas <canvas> ...

  5. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  6. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  7. cocos基础教程(8)粒子效果

    简介 粒子系统是指计算机图形学中模拟特定现象的技术,它在模仿自然现象.物理现象及空间扭曲上具备得天独厚的优势,为我们实现一些真实自然而又带有随机性的特效(如爆炸.烟花.水流)提供了方便. 粒子属性 一 ...

  8. Android碎裂的粒子效果

    最近看到一段时间都没怎么更新文章了,一直在学习iOS相关内容.偶然间看到一个碎裂的粒子效果,觉得很有意思,就查了查,参考下网上的思路自己撸了个轮子. 好了,说了这么多,先看看效果吧~ 依惯例,先说下行 ...

  9. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

随机推荐

  1. 使用Spring时web.xml中的配置

    使用Spring时web.xml中的配置: <?xml version="1.0" encoding="UTF-8"?> <web-app x ...

  2. Rime中州韵导入极点五笔词库（附：自制词库）

    前言 之前写了一篇文章,[输入法]Rime-中州韵 基本设置 附:官方定制指南,其中导入词库这一块引用其它博主的文章,最近发现那个工具链接已经过期了,参考了百度贴吧的说明,不要直接使用工具去导入会更好 ...

  3. STM32Cube自学-1

    为了方便调试,使用Keil5+Proteus.1.新建Proteus STM32项目,选择STMF103C6 2.新建STM32CubeMX项目,选择同型号CPU,选择UART1,Asynchrono ...

  4. -boot移植（十一）---代码修改---支持nandflash

    一.移植前的修改 1.1 include/configs/jz2440修改 原来的定义: 可以看出,要先定义CONFIG_CMD_NAND才能使能NANDFlash. 这个在我们文件中的82行有定义, ...

  5. 读取Excel中数据

    #region 读取导入Excel数据 /// <summary> /// /// </summary> /// <param name="filename&q ...

  6. [CQOI2011]放棋子 （DP，数论）

    [CQOI2011]放棋子 \(solution:\) 看到这道题我们首先就应该想到有可能是DP和数论,因为题目已经很有特性了(首先题面是放棋子)(然后这一题方案数很多要取模)(而且这一题的数据范围很 ...

  7. Java9都快发布了，Java8的十大新特性你了解多少呢？

    Java 9预计将于今年9月份发布,这是否会是一次里程碑式的版本,我们拭目以待.今天,我们先来复习一下2014年发布的Java 8的十大新特性. Java 8可谓是自Java 5以来最具革命性的版本了 ...

  8. KEYCODE_DPAD_CENTER 和 KEYCODE_ENTER

    KEYCODE_DPAD_CENTER或者是KEYCODE_ENTER时,会在view优先处理isConfirmKey,而在activity中的onKeyDown和up中接收不到该按键消息

  9. CentOS修改编码方式为zh_CN.UTF-8

    1.查看系统是否支持简体中文 locale -a 2.修改编码方式 vim /etc/sysconfig/i18n 将文件内容修改为下面文本: LANG="zh_CN.UTF-8" ...

  10. C语言函数调用栈(一)

    程序的执行过程可看作连续的函数调用.当一个函数执行完毕时,程序要回到调用指令的下一条指令(紧接call指令)处继续执行.函数调用过程通常使用堆栈实现,每个用户态进程对应一个调用栈结构(call sta ...