之前在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. 华硕飞行堡垒zx50安装Ubunutu折腾记

    今年8月入手了华硕zx50,配置不错,作为一个合格的Linux爱好者,没买来一台电脑肯定得装上Linux编个程序什么的吧,,可恶的是,笔记本安装Linux系统往往比较麻烦,必须折腾很久才安装上,我手上 ...

  2. nyoj 237 游戏高手的烦恼 二分匹配--最小点覆盖

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=237 二分匹配--最小点覆盖模板题 Tips:用邻接矩阵超时,用数组模拟邻接表WA,暂时只 ...

  3. OO的设计原则

    今天同事和我们一起讨论分享了OO的设计原则,讨论使人明晰,有人一起讨论学习是一件幸福的事情. 1.开闭原则 对功能的扩展是开放的,对修改是闭合的. 可以应用于类的设计,框架的设计等. 为什么?开闭原则 ...

  4. 深度优先搜索 codevs 1031 质数环

    codevs 1031 质数环  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 一个大小为N(N<=17)的质数环是 ...

  5. 合工大 OJ 1332 蛇形阵

    Description 蛇形针回字阵: 如3*3: 回字阵: 7 6 5 8 1 4 9 2 3 Input 多组数据: 每一行一个正整数n(n为奇数,<26),代表n*n矩阵. Output ...

  6. codeforces 616E Sum of Remainders (数论，找规律）

    E. Sum of Remainders time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  7. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  8. 2014-2015 Codeforces Trainings Season 2 Episode 7 G Gophers --线段树

    题意: 有n个地鼠,m个CD碟,每个CD碟有一个影响范围,范围内的地鼠都会被吵到,每次有一个操作就是移动CD碟,然后求每次被影响的地鼠有多少只. 解法: 线段树做.我们只关注地鼠有没有被吵到就可以了, ...

  9. java8-4 多态的练习以及题目

    1./* 多态练习:猫狗案例*/ class Animal { public void eat(){ System.out.println("吃饭"); } } class Dog ...

  10. Eclipse 分屏显示同一个文件

    场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -> Toggle Split Edit ...