话不多说,请看代码:
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) }) } } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“canvas雪花效果核心代码分享”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍