- 享全站VIP文档下载特权
- 与博主亲密交流特权
- 随时随地随心下载
- 文档多格式转化
本页主要讲我们在实战中遇到小demo,望受益 💯 感谢的话不用说,关注支持我,让我充满力量!!!🎉🌈
# Canvas 实现雨天特效
<!DOCTYPE html
><!--声明文档类型:html-->
<html lang="en">
<head>
<!--头部-->
<meta charset="UTF-8" />
<!--字符编码:utf-8国际编码-->
<meta name="Keywords" content="关键词1,关键词21" />
<!--关键词-->
<meta name="Description" content="描述" />
<!--描述-->
<title>流星雨</title>
<!--网页标题-->
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
background: #000;
display: block;
}
</style>
</head>
<body>
<!--身体-->
<canvas id="canvas">您的浏览器不支持cnavas绘图,请您更换浏览器!!</canvas>
<script>
let can = document.getElementById('canvas')
let ctx = can.getContext('2d') //设置绘图环境
let w = (can.width = window.innerWidth) //把窗口的宽度赋值给画布
let h = (can.height = window.innerHeight) //把窗口的高度赋值给画布
let count = 30 //雨滴的个数
let drops = [] //定义一个空数组来保存雨滴个数
//浏览器窗口改变的时候重新获取宽度
window.onresize = function() {
w = can.width = window.innerWidth
h = can.height = window.innerHeight
}
function Drop() {} //定义雨滴对象
//添加原型对象方法
Drop.prototype = {
init: function() {
//初始化
this.x = random(0, w)
this.y = 0
this.r = 1 //初始半径
this.vy = random(4, 5) //竖直方向的加速度 //从4~5之间的随机数
this.vr = 1 //半径的加速度
this.a = 1 //初始透明度
this.va = 0.96 //透明度的变化系数
this.l = random(h * 0.8, h * 0.9) //雨滴下落的高度
},
draw: function() {
//绘制
if (this.y > this.l) {
ctx.beginPath() //一个画布中开始子路径的一个新的集合。丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false) //创建一个圆形 this.x圆的中心的 x 坐标。 this.y圆的中心的 y 坐标。 this.r圆的半径。 0 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 2*Math.PI结束角,以弧度计。 false可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
ctx.strokeStyle = 'rgba(0,255,255,' + this.a + ')' //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
ctx.stroke() //绘制出来路径
} else {
console.log(this.a)
ctx.fillStyle = color(this.a) //透明度
// console.log(ctx.fillStyle);
ctx.fillRect(this.x, this.y, 2, 10) //绘制"已填充"的矩形。默认的填充颜色是黑色。
}
this.update()
},
//更新坐标
update: function() {
if (this.y < this.l) {
this.y += this.vy
} else {
if (this.a > 0.03) {
this.r += this.vr
if (this.r > 50) {
this.a *= this.va
}
} else {
this.init()
}
}
},
}
//不断的更新雨滴位置
function move() {
ctx.fillStyle = 'rgba(0,0,0,.1)'
ctx.fillRect(0, 0, w, h) //这个在先绘制
for (var i = 0; i < drops.length; i++) {
drops[i].draw()
}
//调用经动画
requestAnimationFrame(move)
}
//创建一个雨滴实例对象
//var drop = new Drop();
//drop.init();
//drop.draw();
//延迟产生每个雨滴
function setup() {
for (var i = 0; i < count; i++) {
;(function(j) {
setTimeout(function() {
let drop = new Drop()
drop.init()
drops.push(drop)
}, j * 200)
})(i)
}
}
setup()
move()
//封装一个产生随机数的方法
function random(min, max) {
return Math.random() * (max - min) + min
}
//封装一个随机颜色
function color(a) {
//rgba
let r = Math.floor(Math.random() * 255)
let g = Math.floor(Math.random() * 255)
let b = Math.floor(Math.random() * 255)
return `rgba(${r},${g},${b},${a})`
}
</script>
</body>
<html></html>
</html>