之前在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. 使用backbone.js、zepto.js和trigger.io开发HTML5 App

    为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个 ...

  2. HDU 4421 Bit Magic （图论-2SAT）

    Bit Magic Problem Description Yesterday, my teacher taught me about bit operators: and (&), or ( ...

  3. [转]Linux下权限掩码umask

    本文转自:http://www.cnblogs.com/123-/p/4188942.html ---------------------------------------------------- ...

  4. 通过java来批量生成身份证号

    通过java来批量生成身份证号,方便来测试程序. package com.diyvc.controller.user; import java.util.Calendar; import java.u ...

  5. jQuery事件绑定on、off 和one，取代bind, live, delegate

    jQuery最新版建议:最好用on来代替以前的bind, live, delegate,其中live是最不建议使用的. on和off的格式 on $(elements).on(events[, sel ...

  6. TFSF边界条件

    待续 %1D FDTD simulation with a simple absorbing boundary condition % and a TFSF boundary between hy[] ...

  7. 【问题&解决】试用版SQL Server 2008 R2 提示评估期已过，数据库不能访问解决办法

    因为以前一直是试用版,重启服务器之后,突然数据库不能访问,提示评估期已过,都快吓死了.还好找到了解决办法特copy解决步骤如下: (笔者用的是企业版: R88PF-GMCFT-KM2KR-4R7GB- ...

  8. 匈牙利算法 codevs 2776 寻找代表元

    codevs 2776 寻找代表元  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...

  9. Centos7网络监控

    EPEL是企业版 Linux 附加软件包的简称,EPEL是一个由Fedora特别兴趣小组创建.维护并管理的,针对 红帽企业版 Linux(RHEL)及其衍生发行版(比如 CentOS.Scientif ...

  10. UESTC 288 青蛙的约会 扩展GCD

    设两只青蛙跳了t步,则此时A的坐标:x+mt,B的坐标:y+nt.要使的他们在同一点,则要满足: x+mt - (y+nt) = kL (p是整数) 化成: (n-m)t + kL = x-y (L ...