Canvas实现动态的雪花效果
时间:2019-03-24
本文章向大家介绍Canvas实现动态的雪花效果,主要包括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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 宋宝华:当Linux内核遭遇鲨鱼—kernelshark
- 基于Pytorch的动态卷积复现
- SAP Spartacus的StorefrontConfig对象
- Linux内核虚拟内存管理之匿名映射缺页异常分析
- Elasticsearch:如何把 Elasticsearch 中的数据导出为 CSV 格式的文件
- Nginx 负载均衡配置(实战教程)
- 教懂你什么是 “ 流量劫持 ”
- SAP Spartacus中使用到的Angular ModuleWithProviders类型
- 架构设计 | 基于消息中间件,图解柔性事务一致性
- 结构与算法(02):队列和栈结构
- 用Gaussian寻找圆锥交叉点
- kubernetes用户安全管理模型简析
- Unity3D网络通讯(一)--Asp.Net Core WebApi创建发布注意事项
- Unity3D网络通讯(二)--UnityWebRequest及JsonUtility请求Http Restful
- CS学习笔记 | 20、通过Socks转发的方法