本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
用canvas实现雪花随机动态飘落，代码如下
nbsp;html>Document body{ margin: 0; padding: 0; } canvas{ background: #000; } var canvas = document.getElementById('snow'); var context = canvas.getContext('2d'); // 获得可视区的宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow(){ context.save(); // 开启路径 context.beginPath(); // 移动画布，确定雪花终点为中心点 context.translate(100,100); //起点 context.moveTo(-20,0); // 终点 context.lineTo(20,0); // 线变成白色 context.strokeStyle = '#fff'; // 线变粗 context.lineWidth = 10; // 线变圆头 context.lineCap = 'round'; context.stroke(); // 角度转弧度 var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; // 画第二条线，左下到右上的线 context.moveTo(-disX,disY); context.lineTo(disX,-disY); // 画第三条线 context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } // snow(); //生成雪花的构造函数 function Snow(x,y,scale,rotate,speedX,speedY,speedR){ this.x = x; this.y = y; this.scale = scale; this.rotate = rotate; this.speedX = speedX; this.speedY = speedY; this.speedR = speedR; // 渲染雪花 this.render = function(){ context.save(); context.beginPath(); context.translate(this.x,this.y); context.scale(this.scale,this.scale); context.rotate(this.rotate*Math.PI/180); context.moveTo(-20,0); context.lineTo(20,0); context.strokeStyle = '#fff'; context.lineWidth = 10; context.lineCap = 'round'; context.stroke(); var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; context.moveTo(-disX,disY); context.lineTo(disX,-disY); context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } } // var snow = new Snow(50,50,1,10,10,10,10); // snow.render(); // 存储所有生成的雪花 var snowArray = []; // 生成雪花 function init(){ var len = 100; for(var i = 0;i<len;i++){ var x = Math.random()*canvas.width; var scale = Math.random()+0.5; var rotate = Math.random()*60; var speedX = Math.random()+1 var speedY = Math.random()+5; var speedR = Math.random()*4+2; // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); // snow.render(); (function(x,y,scale,rotate,speedX,speedY,speedR){ setTimeout(function(){ var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); snow.render(); snowArray.push(snow); },Math.random()*8000); })(x,0,scale,rotate,speedX,speedY,speedR); }snowing(); }init(); // 动起来 function snowing(){ setInterval(function(){ //先清除 context.clearRect(0,0,canvas.width,canvas.height); for(var i = 0;i 对边 = sin60*斜边 => y=sin60*半径（r）； */
登录后复制
动态效果图：
更多炫酷CSS3、HTML5、jQuery、Javascript特效，推荐访问：js特效网！
以上就是canvas实现雪花随机动态飘落效果（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2727821.html
