canvas入门级基本用法实现雨滴下落特效
canvas基础知识点参考各种文档,直接上代码,有非常详细注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas雨滴特效</title>
<style>
body{
margin: 0;
overflow: hidden;
}
#rain{
display: block;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="rain"></canvas> <script>
//获取canvas元素
const canvas = document.querySelector('#rain');
//设置canvas元素宽高的函数
var wX,wY;
~~function setSize(){
//监控窗口发生变化时自动调用setSize函数
window.onresize = arguments.callee;
//获取浏览器窗口宽高
wX = window.innerWidth;
wY = window.innerHeight;
//给canvas设置宽高
canvas.width = wX;
canvas.height = wY;
}();
//获取绘制区域(相当于画笔,可在canvas中任意位置绘制图形)
var ctx = canvas.getContext('2d'); //随机产生两个数之间随机数
function random(min,max){
return Math.random()*(max-min) + min;
}
//生成雨滴的构造函数
function Rain(){};
//添加原型方法
Rain.prototype = {
init : function(){
this.x = random(0,wX);//雨滴横坐标
this.y = 0;//雨滴纵坐标默认从最上方下落
this.v = random(3,4);//雨滴每秒下落的速度
this.h = random(0.9*wY,wY);//下落到窗口高度的90%~100%
this.r = 1;//雨滴绽放的初始半径
this.vr = 0.4;//半径扩大的速度
},
draw : function(){
if(this.y<this.h){//判断是否在90%~100%之间
ctx.beginPath(); //抬笔作画
ctx.fillStyle = '#666'; //内容实心用颜色填充
ctx.fillRect(this.x,this.y,4,8); //画矩形小雨滴
}else{//不在区间则以下落到地绽放成圆
ctx.beginPath();
ctx.strokeStyle = '#666';
ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
ctx.stroke();
}
},
move : function(){
if(this.y<this.h){//下落
this.y+=this.v;//每秒下落3~4滴的距离
}else{//绽放成圆
if(this.r<35){
this.r+=this.vr;
}else{
this.init();
}
}
this.draw();//移动的雨滴画出来
}
} //生成的雨滴要添加动画为方便找到存在数组中
var aRain = [];
//创造雨滴函数
function createRain(num){
for(var i=0;i<num;i++){
setTimeout(function(){//每隔200毫秒生成一个
var rain = new Rain();
rain.init();
rain.draw();
aRain.push(rain);
},200*i)
}
}
createRain(50); //用定时器画帧形成动画
setInterval(function(){
// ctx.clearRect(0,0,wX,wY);//擦除上一个图形(下雪的感觉)
// 这里不是擦除雨滴效果是加蒙版达到渐变效果
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0,0,wX,wY);
for(var item of aRain){
item.move();
}
},1000/144);//根据自己屏幕刷新频率设置(此处是144HZ) </script>
</body>
</html>
内容本人原创,有不足之处请见谅!欢迎指正!转载请注明出处附上链接,谢谢!
canvas入门级基本用法实现雨滴下落特效的更多相关文章
- jq模仿雨滴下落的动画
效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/ } .co ...
- canvas的常见用法
Canvas canvas是一种抽象概念,是2D图形系统中的重要部分,canvas一系列函数最终都是android 2D图形库Skia的一些列封装,对应在SKCanvas.cpp.canvas在系统中 ...
- android Canvas 和 Paint用法
自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- Android为TV端助力 Canvas 和 Paint用法
自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...
- HTML5 canvas炫酷棱镜效果的幻灯片特效
这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...
- [译]Canvas的基本用法
在本文章中 <canvas> 元素 替换内容 </canvas> 标签不可省 渲染上下文(The rendering context如何翻译) 检查支持性 一个模板骨架 一个简 ...
- Paint与Canvas的简单用法
参考:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=278237 自定义View 重写onDraw方法 package com. ...
- Canvas的基本用法
canvas没有设置宽度和高度的时候,会初始化宽度:300像素和高度:150像素.可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲 ...
随机推荐
- Tensorflow2.0学习(一)
站长资讯平台:今天学习一下Tensorflow2.0 的基础 核心库,@tf.function ,可以方便的将动态图的语言,变成静态图,在某种程度上进行计算加速 TensorFlow Lite Ten ...
- SIGAI深度学习第七集 卷积神经网络1
讲授卷积神经网络核心思想.卷积层.池化层.全连接层.网络的训练.反向传播算法.随机梯度下降法.AdaGrad算法.RMSProp算法.AdaDelta算法.Adam算法.迁移学习和fine tune等 ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- 內嵌html字符串顯示
前端:System.Web.HttpUtility.HtmlEncode() @Html.Raw(htmlStr) 後端:System.Net.WebUtility.HtmlDe ...
- Jmeter linux 运行
一.在Linux服务器先安装sdk 1.先从客户端下载jdk1.8.0_144.tar.gz,再上传到服务器 2.解压:tar -xzf jdk1.8.0_144.tar.gz,生成文件夹 jdk1. ...
- python 装饰器应用
1 注册回调函数 下面这个示例展示了通过URL的路由来调用相关注册的函数示例: class MyApp(): def __init__(self): self.func_map = {} def re ...
- 冲刺阶段——Day1
[成员分工及任务量] 成员 分工 任务量(小时) 王梓鸿 完成页面设计并编写输入输出图形界面,部分代码测试 20 童皓祯 编写注册和登录模块代码,部分代码测试 20 林郅聪 绘制燃尽图,程序功能整合及 ...
- java Date 转mysql timestamp 秒数不一致
mysql的字段类型是timestamp(0), java的类型的是util.Date, 在插入数据的时候发现, 数据库的实际数据秒数比预想的数据偶尔会大1秒. 问题的原因: mysql的timest ...
- 性能优化 | 30个Java性能优化技巧,你会吗?
在Java程序中,性能问题的大部分原因并不在于Java语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间 ...
- 《你不知道的JavaScript(上)》笔记——作用域闭包
当函数可以记住并访问所在的词法作用域时, 就产生了闭包, 即使函数是在当前词法作用域之外执行. function wait(message) { setTimeout( function timer( ...