Canvas实现动态的雪花效果
效果如下:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ height: 100%; } #myCanvas{ background-color: #87CEEB; } </style> </head> <body> <canvas id="myCanvas" width="1000" height="600">您的浏览器不支持Canvas元素</canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var practicles = []; for (var i = 0; i < 500; i++) {//循环生成500粒 practicles.push({ x: Math.random()*(window.innerWidth), y: Math.random()*(window.innerHeight), vx: Math.random()-0.5, vy: Math.random()+0.5, size: Math.random()*3+1, color: "#FFF" }) } function timeUpdate(){ context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布区域 var practicle; for (var i = 0; i < 500; i++) { var practicle = practicles[i]; practicle.x += practicles[i].vx; practicle.y += practicles[i].vy; if (practicle.x<0) {practicle.x=window.innerWidth} if (practicle.x>window.innerWidth) {practicle.x=0} if (practicle.y>window.innerHeight) {practicle.y=0} context.beginPath(); context.arc(practicle.x,practicle.y,practicle.size,0,Math.PI*2) context.closePath(); context.fillStyle = practicle.color; context.fill(); } } setInterval(timeUpdate,40); </script> </body> </html>
原文链接:http://www.qdfuns.com/notes/27497/c5bd779e55ec3fe6cb4928726e8e95ed.html
(资源库 www.zyku.net)
您可能感兴趣的文章
- 02-18canvas与html5实现视频截图功能示例
- 02-14canvas的神奇用法
- 09-23beats studio buds如何连接安卓手机
- 01-11搜湖同城-搜湖同城应用软件功能介绍
- 10-21支付宝移除转账常用教程分享
- 07-05Linux unzip命令
- 01-11益阳在线网-益阳在线网应用软件功能介
- 01-13舒医汇-舒医汇应用软件功能介绍
- 01-12照片去模糊软件-照片去模糊软件应用软
- 12-25倒数计时日-倒数计时日应用软件功能介
- 06-21定时开启关闭网站JS代码
- 02-22dedecms文章页增加内容字体大小选择的
- 07-05Linux modinfo命令
- 03-15vivoy53s保密柜使用教程
- 09-20QQ看点在哪里查看等级
- 02-23DedeCMS添加自定义文档属性的详细教程
- 01-11Freshful生鲜商城-Freshful生鲜商城应
- 01-13Dedecms文章设置推荐后列表页标题自动
- 12-03苹果手机如何开启icloud照片
- 02-22dedecms实现显示访问者ip地址的方法
最近更新
阅读排行
猜你喜欢
- 01-13ipad开启扫码器教程
- 10-19小米civi设置返回键教程分享
- 10-29小天才z6手表睡眠模式怎样关闭
- 12-26中智运司机端-中智运司机端应用软件功
- 11-01迪士尼度假区门票退款方法分享
- 02-19Linux永久关闭iptables防火墙的命令
- 09-23vivox70如何拍月亮
- 01-11智驾培豫快端-智驾培豫快端应用软件功
- 09-19华为智能体脂秤使用方法分享
- 03-19小米11Pro开启来电视频来电秀方法