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 相关文章推荐
java、javascript实现附件下载示例
Aug 14 Javascript
js实现tab切换效果实例
Sep 16 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
jsonp原理及使用
2013/10/28 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
JS选取DOM元素的简单方法
2016/07/08 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python生成器generator用法实例分析
2015/06/04 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python hashlib模块用法实例分析
2018/06/12 Python
使用python实现画AR模型时序图
2019/11/20 Python
python super()函数的基本使用
2020/09/10 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
上班睡觉检讨书
2014/01/09 职场文书
寒假思想汇报
2014/01/10 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
导游词之凤凰古城
2019/10/22 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
React自定义hook的方法
2022/06/25 Javascript