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 小练习(实例代码)
Aug 07 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python函数的作用域及关键字详解
2019/08/20 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python初步实现word2vec操作
2020/06/09 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技