之前在codepen上看到了类似的效果，于是自己也使用coffee-script写了个相似的demo

　　效果：http://whxaxes.github.io/canvas-test/src/Particle-demo/blackhole/blackhole.html

　　源码：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Particle-demo/blackhole

　　原理就是简单的加速运动，不作过多赘述，有兴趣的请见源码

　　

canvas粒子demo的更多相关文章

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

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

  2. 炒鸡简单的canvas粒子（山东数漫江湖）

    位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...

  3. 打造高大上的Canvas粒子(一)

    HTML5 Canvas <canvas>标签定义图形,比如图表和其他图像,必须用脚本(javascript)绘制图形. 举例:绘制矩形 <script> var c = do ...

  4. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  5. html5 canvas 粒子特效

    不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...

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

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

  7. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  8. canvas 粒子效果

    var canvas = document.createElement('canvas'); var cxt = canvas.getContext('2d'); var W = canvas.wid ...

  9. 一个canvas的demo

    该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

  1. 提高IT团队工作效率的建议

    过分强调个人主义,不科学分工,内部成员的冲突等,都将导致IT团队没有凝聚力,直接影响团队合作项目的完成.如何提高团队工作效率,相信很多IT经理人都想过这类问题.日前,国外科技网站CIO撰文就如何提高I ...

  2. 将text 文件转为List

    Integer 类型 ArrayList<Integer> Mlist = new ArrayList<Integer>(); Scanner scM = new Scanne ...

  3. TarJan 算法求解有向连通图强连通分量

    [有向图强连通分量] 在有向图G中,如果两个 顶点间至少存在一条路径,称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的 ...

  4. 【ubuntu】中文输入法安装二三事

    本来很愉快地刷着JS程序,很有感慨啊,想写篇博客记一下学习笔记,结果忘记了博客账号,后来通过邮箱找回了之后想要开始写..发现ubuntu的中文输入法不能用啊(其实不是不能用,就是小白没搞清楚状况,双系 ...

  5. Listview的点击事件

    上篇文章总结了如何自定义listview的显示内容,然而listview不能只是提供显示功能,还必须能够点击它显示一些东西: listView.setOnItemClickListener(new O ...

  6. 怎样快速免费获取Windows版本的ZBrush

    ZBrush是一款专业的3D绘制软件及数字雕刻软件,随着3D技术的不断进步,ZBrush也是越来越受到业内欢迎,在世界拥有了众多的粉丝和爱好者.相信很多用户对软件的体验就是从使用的版本开始的,本文就教 ...

  7. 边工作边刷题：70天一遍leetcode: day 88

    Unique Word Abbreviation 要点: 简单题,主要是理解题意.no other words have the same abbreviation as the given word ...

  8. AC日记——石子归并 codevs 1048

    1048 石子归并  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 有n堆石子排成一列,每堆石子 ...

  9. 在A*寻路中使用二叉堆

    接上篇:A*寻路初探 GameDev.net 在A*寻路中使用二叉堆 作者:Patrick Lester(2003年4月11日更新) 译者:Panic 2005年3月28日 译者序 这一篇文章,是&q ...

  10. C r and n(组合数)

    找出n个数的r个数的组合,如下形式: 输入:n,r分别为 5, 3 输出: 5    4     3 5    4     2 5    4     1 5    3     2 5    3     ...