Canvas实现动态的雪花效果


Posted in Javascript onFebruary 13, 2017

效果如下:

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>

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

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
Vuex 入门教程
Jan 10 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
php 文件状态缓存带来的问题
2008/12/14 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python学生管理系统代码实现
2020/04/05 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
财务助理岗位职责
2013/11/10 职场文书
社团招新策划书
2014/02/04 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
python Polars库的使用简介
2021/04/21 Python