之前在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. 问题解决——ShowWindow不显示窗口

    配合任务栏通知区域. //MFC对话框程序 void CXXXDlg::OnShowHideUi() { // TODO: 在此添加命令处理程序代码 m_bShown=!m_bShown; ShowW ...

  2. SQL Server 2008 R2——VC++ ADO 操作 多线程操作 代码结构

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  3. Tomcat 服务器版本的区别以及下载与安装

    Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了 ...

  4. android SQLiteOpenHelper使用示例

    我们大家都知道Android平台提供给我们一个数据库辅助类来创建或打开数据库,这个辅助类继承自SQLiteOpenHelper类,在该类的 构造器中,调用Context中的方法创建并打开一个指定名称的 ...

  5. 迅为4412开发板Linux驱动教程之GPIO的初始化

    视频下载地址:http://pan.baidu.com/s/1c06oiti GPIO的初始化 • 在内核源码目录下使用命令“ls drivers/gpio/*.o”,可以看到“gpio-exynos ...

  6. 数据持久化之sqlite基本用法

    一.ACID 即原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability). 原子性:整个事务中的所有操作,要么全部完成,要么全部不完 ...

  7. js计算系统当前日期是星期几的几种方法

    方法一: // 计算系统当前是星期几 var str = "今天是星期" + "日一二三四五六".charat(new date().getday()); 方法 ...

  8. python中property干什么用的？

    先来段官方文档压压惊.. property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget i ...

  9. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  10. Unity3D MainCamera和NGUI UICamera的小插曲

    集成NGUI 在实际的项目中,经常会使用NGUI来制作UI,用Main Camera来表现3D,但是NGUI的Camer的投射是正交视图而非透视,它绑定UICamer的脚本而且它的Tag默认是Unta ...