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

写了些注释

  1. body {
  2. 	overflow:hidden;
  3. 	margin:0;
  4. 	padding:0;
  5. 	background-color:#222222
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="canvasParticle">Canvas is not supported in your brower.</canvas><script>
  11. window.onload = function() {
  12.  
  13.     var oCanvas = document.getElementById('canvasParticle');
  14.     var cxt = null;
  15.     //用来存放粒子的素组
  16.     var particles = {};
  17.     var particleIndex = 0;
  18.  
  19.     if (oCanvas.getContext) {
  20.         cxt = oCanvas.getContext('2d');
  21.     }
  22.  
  23.     oCanvas.width = window.innerWidth;
  24.     oCanvas.height = window.innerHeight;
  25.  
  26.     function Particle() {
  27.         particleIndex++;
  28.  
  29.         particles[particleIndex] = this;
  30.  
  31.         //粒子放射的中心点
  32.         this.x = oCanvas.width / 2;
  33.         this.y = oCanvas.height / 2;
  34.         //初始化粒子沿X轴和Y轴的速度
  35.         this.vx = Math.random() * 6 - 3;
  36.         this.vy = Math.random() * 4 - 2;
  37.  
  38.         this.growth = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01; // 根据x/y轴的位置决定大小
  39.         this.id = particleIndex;
  40.         this.size = 0;
  41.         this.color = getRandomColor();
  42.     };
  43.  
  44.     Particle.prototype.draw = function() {
  45.         this.x += this.vx;
  46.         this.y += this.vy;
  47.         //根据移动的距离逐渐变大
  48.         this.size += this.growth;
  49.  
  50.         if (this.x < 0 || this.x > oCanvas.width || this.y < 0 || this.y > oCanvas.height) {
  51.             //出界则移除
  52.             delete particles[this.id];
  53.         }
  54.  
  55.         cxt.fillStyle = this.color;
  56.         cxt.beginPath();
  57.         cxt.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  58.         cxt.fill();
  59.     };
  60.  
  61.     function animate() {
  62.         requestAnimationFrame(animate);
  63.  
  64.         cxt.fillStyle = '#222222';
  65.         cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);
  66.         //每次网数组添加一个数据
  67.         new Particle();
  68.         //遍历数组，依次画出
  69.         for (var i in particles) {
  70.             particles[i].draw();
  71.         }
  72.     };
  73.     requestAnimationFrame(animate);
  74. };
  75.  
  76. //随机颜色方法
  77. function getRandomColor() {
  78.     return '#' + (Math.random() * 0xffffff << 0).toString(16);
  79.  
  80. };</script>
  81. </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. c#中如何在一个panel中放入窗体

    Form2 f2 = new Form2(); //实例化窗体FORM2 f2.TopLevel = false; //设置为非顶级窗体 f2.FormBorderStyle = FormBorder ...

  2. NodeJs进击，新建一个Node Server

    直接新建一个server.js 然后 输入以下代码 var http = require('http') http.createServer(function(req,res){ res.writeH ...

  3. [HEOI2015]定价 （贪心）

    分类讨论大法好! \(solution:\) 先说一下我对这个题目的态度: 首先这一题是贪心,这个十分明显,看了一眼其他题解都是十分优秀的贪心,可是大家都没有想过吗:你们贪心都是在区间\([l,r]\ ...

  4. Android 中查看内存的使用情况集常用adb命令

    http://blog.csdn.net/bigconvience/article/details/35553983 http://blog.csdn.net/duantihi/article/det ...

  5. jQuery——Js与jQuery的相互转换

    $()与jQuery() jQuery中$函数,根据传入参数的不同,进行不同的调用,实现不同的功能.返回的是jQuery对象 jQuery这个js库,除了$之外,还提供了另外一个函数:jQuery j ...

  6. JXL读取Excel(只支持xls版本)——（二）

    注意:jxl是不支持xlsx后缀的excel的.因此建议用POI读取excel. Jar包 同一一样 Java代码 package JXL; import java.io.File; import j ...

  7. SpringBoot整合MyBatis(注解版)

    详情可以参考Mybatis官方文档 http://www.mybatis.org/spring-boot-starter/mybatis-spring-boot-autoconfigure/ (1). ...

  8. SVM较全面介绍，干货！（转载）

    很不错的一篇介绍SVM的文章,证明通俗易懂! 转自:https://blog.csdn.net/v_july_v/article/details/7624837 前言 动笔写这个支持向量机(suppo ...

  9. ARMV8 datasheet学习笔记4：AArch64系统级体系结构之Self-hosted debug

    1. 前言 2. 关于self-hosted debug Debugger调试器 是操作系统或系统软件的一部分,它会处理debug exception或修改debug system register, ...

  10. R-TREE

    原文地址:http://blog.csdn.net/sunmenggmail/article/details/8122743 1984年,加州大学伯克利分校的Guttman发表了一篇题为“R-tree ...