玩别人玩剩下的：canvas大雪纷飞
canvas大雪纷飞
前言：正好业务触及到canvas，看完api顺手写个雪花效果，因为之前看到过很多次这个，主要看思路，想象力好的可以慢慢去创作属于自己的canvas效果
思路：
- 利用画圆arc()和环形渐变色createRadialGradient()画一个雪花的模型（想要更好看的模型可以用图片代替）
var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,255,255,0.2)");
this.canvas.fillStyle = grd;
this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.canvas.fill();效果图
- 如何让canvas画布上的点移动
动画其实就是一帧一帧的画面的组合，在一定时间内把画面从第一帧切换到第二帧到第n帧这个过程就是动画
弄懂这个道理，让雪花动起来就很简单了，重绘。
改变雪花的x,y坐标，在短时间内重绘一次，然后不断重复此过程，为了照顾浏览器爸爸的感受，x,y超出画布边界的时候把雪花清除掉。
setInterval(() => {
arr[0].canvas.clearRect(0, 0, maxW, maxH);
for(var i = 0; i < arr.length; i++) {
if(arr[i].y >= maxH){
//清除超出下边界的雪花
continue;
}
arr[i].play();
}
}, 30);
play: function() {
this.x += this.speedX;
this.y += this.speedY;
if(this.x < this.r) {
this.speedX = Math.abs(this.speedX);
}
if(this.y < this.r) {
this.speedY = Math.abs(this.speedY);
}
this.canvas.beginPath();
var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,255,255,0.2)");
this.canvas.fillStyle = grd;
this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.canvas.fill();
}- 最后一步就是创建一个个雪花实例去执行动画了
var snow = function() {
this.x = this.rand(maxW);
this.y = 0;
this.r = this.rand(10);
this.speedX = this.getRanNum(-5, 5);
this.speedY = this.getRanNum(10, 20);
this.width = 0;
this.height = 0;
this.canvas = {};
this.init();
}
var arr = [];
setInterval(() => {
for(let i = 0; i < 10; i++) {
arr.push(new snow());
}
}, 30);完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: '#fff';
}
canvas {
background-color: rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script type="text/javascript">
var myCanvas = document.getElementById('canvas')
var ctx = myCanvas.getContext('2d');
var clientW = window.innerWidth;
var clientH = window.innerHeight;
myCanvas.width = clientW;
myCanvas.height = clientH;
var maxW = clientW;
var maxH = clientH;
//雪花实例构造函数
var snow = function() {
this.r = this.rand(10);
this.x = this.rand(maxW);
this.y = 0;
this.speedX = this.getRanNum(-5, 5);
this.speedY = this.getRanNum(10, 20);
this.width = 0;
this.height = 0;
this.canvas = {};
this.init();
}
snow.prototype = {
//初始化
init: function() {
var snow = document.getElementById('canvas');
this.canvas = snow.getContext('2d');
this.width = snow.width;
this.height = snow.height;
},
//获取0-num之间的随机数
rand: function(num) {
return Math.floor(Math.random() * num + 1);
},
//获取n-m之间的随机数
getRanNum: function (n, m) {
return Math.floor(Math.random() * (m - n) + n);
},
//雪花移动
play: function() {
//改变坐标位置 连续重绘形成动画效果
this.x += this.speedX;
this.y += this.speedY;
this.canvas.beginPath();
//定义雪花UI 渐变色+圆
var snowColor = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
snowColor.addColorStop(0, "rgba(255,255,255,1)");
snowColor.addColorStop(1, "rgba(255,255,255,0.2)");
this.canvas.fillStyle = snowColor;
this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.canvas.fill();
}
};
var arr = [];
//生成新雪花的速度 每30ms生成10个
setInterval(() => {
for(let i = 0; i < 10; i++) {
arr.push(new snow());
}
}, 30);
//雪花重绘(即帧，多帧即移动动画) 30ms重绘一次
setInterval(() => {
arr[0].canvas.clearRect(0, 0, maxW, maxH);
for(let i = 0; i < arr.length; i++) {
if(arr[i].y >= maxH){
//清除超出下边界的雪花
arr.splice(i,1);
continue;
}
arr[i].play();
}
}, 30);
</script>
</body>
</html>最后，每几个canvas的方法组合一下做个小效果，慢慢的就可以做大型炫酷效果了，当然，炫酷效果离不开一些常用或生僻的数学知识，各类算法，方法，相关插件（我说的插件是用来计算一些东西或者图形之类的，不是用插件画canvas）作为铺垫
敲黑板，希望路过的大神能介绍一些canvas进阶需要学习的一些知识点，小弟不胜感激~
版权所有，转载请注明出处~
玩别人玩剩下的：canvas大雪纷飞的更多相关文章
- 为什么说程序员都应该玩一玩GitHub
既熟悉又陌生的GitHub 关于GitHub,相信每一个程序员都再熟悉不过了.它为开发者提供Git仓库的托管服务,是全世界最大的代码集中地,被戏称为“全球最大同性交友网站”. 但是对于很大一部分程序员 ...
- 玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...
- 一起玩转玩转LiteOS组件：TinyFrame
摘要:TinyFrame是一个简单的用于解析串口(如 UART.telnet.套接字等)通信数据帧的库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转TinyFrame>,作者:Lio ...
- 玩一玩基于Token的 自定义身份认证+权限管理
使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证用户名与密码 验证成功后,服务端会签发一个 Toke ...
- 无语啊，sublime给我弄乱玩，玩坏了，而且安装插件也安装不了
国内的什么插件地址都TMMD失效了,没办法,只能翻"强"到外面找了,而且找了很多也用不了,所以收藏一个为了预防以后不行有补救的方法: 百度的99%都不行,不是报这个错就是那个错,可 ...
- 想挑战AlphaGO吗？先和PostgreSQL玩一玩?? PostgreSQL与人工智能(AI)
1月4日晚,随着古力认输,Master对人类顶尖高手的战绩停留在60胜0负1和,而令人尴尬的是这唯一一场和棋还是因为棋手掉线系统自动判和,并不是棋盘上的局势真的势均力敌了.包括聂卫平.柯洁.朴廷桓.井 ...
- js 玩一玩
闲着没事学了学js,做了一个下页面玩玩. 下面是html代码: <!DOCTYPE html><html> <head> <meta charset=&quo ...
- .NET Core 玩一玩 Ocelot API网关
.net 这几年国内确实不好过. 很多都选择转行.不过.net Core跨平台 开源之后 .社区的生态在慢慢建立.往好的趋势发展. 对于坚守在.NET战线的开发者来说 是个挺不错的消息. 特别是微软 ...
- 玩一玩MEAN
参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.
随机推荐
- ubuntu 下的ftp安装及root身份远程配置
第一步:在 Ubuntu 中安装 VSFTPD 服务器 //安装 VSFTPD 二进制包 $ sudo apt-get update $ sudo apt-get install vsftpd //使 ...
- springboot----二、Hello,SpringBoot！
二.Hello,SpringBoot! 2.1.环境搭建 java version 1.8 maven springboot 最新版 开发工具:idea 2.2.创建基础项目说明 Spring官方提供 ...
- 微信小程序断网处理
wx.onNetworkStatusChange(function callback) 参数 function callback 网络状态变化事件的回调函数 参数 Object res 属性 类型 说 ...
- mysql 完整备份和恢复
mysql 完整备份和恢复 一.MySQL完整备份操作 1.直接打包数据库文件夹 创建数据库auth: MariaDB [(none)]> create database auth;Quer ...
- Java学习笔记:03面向对象-接口_多态
1.类的概念 一堆具有共同的成员变量(属性)和成员方法(功能)对象的集合 2.接口的概念 接口是功能的集合,就是方法的集合 接口中只能定义方法,不能定义普通的成员变量 而且接口中的成员方法,必须是抽象 ...
- 如何写好B端产品的技术方案？
B端产品为企业提供协同办公的工具,帮助企业解决某类经营管理问题,核心价值在于为企业增加收入.降本提效.管控风险,企业级SaaS产品也是B端产品中的一类. B端产品有以下特点: 客户是一个群体:B端产 ...
- Python入门随记（2）
1.二维列表的声明 [['pygis'],['gis']] 2.CSV格式的本质,是用,作为分隔符. 3.for循环 for -- in -- 例: a=0 for i in range(100): ...
- python 程序小练习
print("Type integers,each followed by Enter; or just Enter to finish") total = 0 count = 0 ...
- ybt1184：明明的随机数
[题目描述] 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数 ...
- ssh编译安装后重启失败问题
编译好的ssh重启出现如下报错 这个原因是因为systemd与ssh不兼容造成的 删掉服务 rm /usr/lib/systemd/system/sshd.service 重启 /etc/init.d ...