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删除数组元素的函数介绍
Mar 27 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python3开发环境搭建详细教程
2020/06/18 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
如何进行Linux分区优化
2013/02/12 面试题
医学院校毕业生自荐信范文
2014/01/01 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
群教班子对照检查材料
2014/08/26 职场文书
医院感染管理制度
2015/08/05 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers