~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~
看到coding的主界面有雪花, 原来,哇, 真漂亮, 一看源代码, 哦了个去, angular写的, 压力好大, 分析分析分析分析....
然后就写成jQ插件的样子给大家用了。
在线预览的页面是: http://1.keepu.sinaapp.com/snow/snow.html
Github的代码地址是: http://sqqihao.github.io/nice-Snowing ;
上图了

后面把angular拿掉了,直接引用jQuery就好了,其实不用jQuery也行的哇, 兼容没弄哇;
HTML的代码就是canvas就好了,如下
<canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"></canvas> <canvas class="snow-canvas" speed="3" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366" height="667"></canvas> <canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="snow.png" width="1366" height="667"></canvas>
所有的配置都是在canvas节点上面的, 看节点属性的名字就知道是神马意思了,
比如:
添加image这个属性是图片地址, 让雪花自定义成喜欢的样子;
size表示的是图片的大小
count表示图片的个数..等等; 直接戳实例地址:打开demo;
~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~的更多相关文章
- CAEmitterLayer实现雪花效果
CAEmitterLayer 简介 在iOS5.0中,Apple引入了CAEmitterLayer层,CAEmitterLayer是一个高性能的粒子效果引擎,被用来创建实时粒子动画,如:烟雾,火,雨等 ...
- CodePen 作品秀:Canvas 粒子效果文本动画
作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
- canvas雪花
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Html页面雪花效果的实现
简单介绍 昨天修改了一下博客所用的模板,冬天来了,给自己的博客加点雪花,感觉更有意境. 百度找到了非常多的结果,最终还是选用了cfs.snow.js,很赞压缩之后只有1kb左右,而且不会影响页面使用, ...
- 6 cocos2dx粒子效果,类图关系,系统原生粒子和自己定义粒子效果,粒子编译器软件,爆炸粒子效果,烟花效果,火焰效果,流星效果,漩涡粒子效果,雪花效果,烟雾效果,太阳效果,下雨效果
1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...
- HTML5 Canvas时间效果
Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...
随机推荐
- 2016"百度之星"-资格赛
//本题要求:(Ar*A2...An)%p,亦即[(A1*A2*...An)/(A1*A2*...Ar-1)]%p,由于A1*A2...An乘积过大,无法求得相除所得的结果 //我们需要用到乘法逆元( ...
- java 21 - 14 Properties类
类 Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 注意:Properties是Has ...
- UTF-8 带签名和不带签名的区别
就和字面上一样,带签名的UTF-8文件比不带签名的,在文件开头的地方就多了几个16进制字符--[EF BB BF ],这9个字符就是"签名",这样做的好处是让文本处理工具或者浏览器 ...
- [CareerCup] 2.4 Partition List 划分链表
2.4 Write code to partition a linked list around a value x, such that all nodes less than x come bef ...
- iOS——浅谈iOS中三种生成随机数方法
ios 有如下三种随机数方法:
- aptana studio 3汉化方法 及支持jquery的方法
之前看弦哥的 Asp.Net大型项目实践系列第二季(一)哥欲善其事,必先利其器 看到他介绍了aptana,好像用来学习js是个好工具... 因为不论你写什么,都会提示你它在各个浏览器中是否被支持... ...
- 使用git推送代码到开源中国以及IDEA环境下使用git
使用git推送代码到开源中国以及IDEA环境下使用git 在学习Java的过程中我们会使用到git这个工具来将我们本周所编写的代码上传到开源中国进行代码托管,而在使用git的时候有很多的同学由于不会操 ...
- html5 canvas 粒子特效
不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...
- HoloLens开发手记 - Known issues 已知问题
本文主要提及一份问题清单,这些问题都可能对我们开发HoloLens应用造成困扰. Visual Studio 在使用VS 2015 Update 1连接HoloLens时,可能会有些小问题.但是这些小 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...