canvas雪花效果核心代码分享


Posted in Javascript onFebruary 19, 2017

话不多说,请看代码:

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 maxH = ca.height;
 var maxW = ca.width;
 //每一个雪花都具有的特性
 //x,y坐标、雪花半径、角度、
 //先生成100个雪花
 var snows = [];
 for(var i=0;i<200;i++){
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), //这个是起到更新数据的作用
 "radius": random(2, 10)
 });
 }
 //将这些属性应用到每一雪花上
// for(var i=0;i<snows.length;i++) {
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);
// ra.addColorStop(0, "rgba(255,0,0,1)");
// ra.addColorStop(1, "rgba(255,0,0,0.1)");
// ctx.fillStyle = ra;
// ctx.beginPath();
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fill();
// }
 //如果向上面这样写的话不会有动画效果
 //要实现动画效果就要让每一个雪花的特性都变动起来
 //设置定时器,定时改变特性
 var timer = setInterval(function () {
 snow();
 //要实现动画效果首先要清除画布内容
 ctx.clearRect(0, 0, maxW, maxH);
 //每一个雪花每隔16ms需要变动的特性是
 //x、y坐标,这是需要一个新的数值来做计算,改变它们的值
 //为了避免重新定义这里直接利用snows.radius来计算
 for (var i = 0; i < snows.length; i++) {
 //一开始每一个雪花的x,y坐标和半径r
 //注意不能这样写,后面的雪花的数据会把前面的顶掉,这个bug找了好长时间
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var d = snows[i].deg;
 //y变化量
 var yChange = 0.5 * snows[i].radius;
 //x变化量 这里可以将x的变化量和y的变化量通过snows.deg关联起来,
 //从而使每一个雪花都沿着自己的轨迹走,也可以单独设定,所有的雪花轨迹一样
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //这里的三角公式经过测试 tan 是最合适的
 snows[i].top += yChange;
 snows[i].left += xChange;
 //经过上面这些步骤每一个雪花的x,y坐标都发生了改变,随着时间的推移,
 //雪花都会飘出画布,雪花最后就没有了,这里需要作出判断,把超出画布的雪花从snows
 //里面删掉,然后再添加新的雪花,这一步在最后进行,这里只做判断
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 //这里的x<0 是因为 xChange可能为负值
 if(i>0){
  snows.splice(i--, 1);
  continue;//如果超出范围了
  // 那这个雪花就没必要再进行后面的渲染了,所以这个判断可以降低性能消耗
 }
 }
 //开始渲染
 var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius);
 ra.addColorStop(0, "rgba(255,255,255,1)");
 ra.addColorStop(1, "rgba(255,255,255,0.1)");
 ctx.fillStyle = ra;
 ctx.beginPath();
 ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI);
 ctx.fill();
 }
 }, 16);
 //增加雪花的数量
 //就是往snows数组中添加成员
 function snow(){
 if(snows.length<220) {
 var l = 220 - snows.length;
 for(var i=0;i<l;i++){
 snows.push({
  "left": random(0, maxW),
  "top": 0,
  "deg": random(-20, 20), //这个是起到更新数据的作用
  "radius": random(2, 10)
 })
 }
 }
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
Ajax和Comet技术总结
Feb 19 #Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
You might like
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
What is EJB
2016/07/22 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
销售主管岗位职责
2014/02/08 职场文书
党员志愿者活动总结
2014/06/26 职场文书
先进党组织事迹材料
2014/12/26 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers