~~圣诞节到啦, 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;　
时间： 2024-10-14 11:25:06

~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~的相关文章

canvas雪花效果核心代码

var ca = document.getElementById("ca"); var ctx = ca.getContext('2d'); //生成n~m之间的随机数的函数 function random(n,m){ return Math.floor(Math.random() * (m - n) + n); } //角度转弧度的函数 function toRd(angle){ return angle * Math.PI / 180; } //设置变量存储画布的最大宽高度 var

HTML5 Canvas动画效果实现原理

在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x, y)方法来刷新须要绘制的图形 首先是绘制图形的方法,例如以下: function myAnimation() { ctx.clearRect(0, 0, canvas_size_x, canvas_size_y); if (x_icon < 0 || x_icon > canvas_size_

6 cocos2dx粒子效果，类图关系，系统原生粒子和自己定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果

?? 1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad 点粒子和方形粒子系统,都继承了CCParticleSystem的全部属性 CCParticleExplosion 爆炸粒子效果 CCParticleFireworks 烟花粒子效果 CCParticleFire 火焰粒子效果 CCParticleMetepr 流行粒子效果 CCParticleSpi

6 cocos2dx粒子效果，类图关系，系统原生粒子和自定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果

 1 粒子 示例 2 类图关系 3 系统原生粒子 CCParticleSystem 所有粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad 点粒子和方形粒子系统,都继承了CCParticleSystem的所有属性 CCParticleExplosion 爆炸粒子效果 CCParticleFireworks 烟花粒子效果 CCParticleFire 火焰粒子效果 CCParticleMetepr 流行粒子效果 CCParticleSpira

canvas制作雪花效果

<!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title>圣诞主题</title>    <link rel='stylesheet' href='common.css' />    <link rel="

canvas 3D雪花效果

<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="utf-8"/> <title></title> </head> <body style="background-color: #f00; height: 100%;"> <script type="te

canvas仪表盘效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas仪表盘动画效果</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; } canvas { display: none; border: 1p

2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等

1.字符串去重,html模板取值 2.javascript正则表达式之$1...$9 3.jquery插件 4.返回上一页并刷新 解决方法: <a href ="javascript:location.href=document.referrer;"> 5.用webstorm写的手机网站 怎样能用手机预览呢? 解决方法:布署到wamp,xamp,iis上,然后用浏览器生成二维码,扫一扫就可以打开.假如是javaweb项目,挂上tomcat手机直接访问你机子的ip. 6.比例

JS实现雪花效果

演示效果 http://www.9696e.com/demo/snow/ 春节之前新一博客也会一直挂着的. 加载链接 <script src="http://www.9696e.com/demo/snow/snow.js" type="text/javascript"></script> 源码奉上 1 (function(){var t,e,n,a,o,i,r=[],s=[],u=0;requestAnimationFrame=window.