直播视频网站源码实现鼠标移动淡入淡出Canvas小球效果

直播视频网站源码实现鼠标移动淡入淡出Canvas小球效果的相关代码

html

 

<style>
html,
body {
width: 100%;
height: 100%;
}
canvas{
background: black;
}
</style>
<canvas id="canvas"></canvas>
 

 

JS

 

<script>
let canvas = document.getElementById('canvas')
window.onresize = canvasOnresize
//页面大小改变 canvans大小改变
function canvasOnresize() {
canvas.width = document.getElementsByTagName('body')[0].clientWidth
canvas.height = document.getElementsByTagName('body')[0].clientHeight
}
//初始化canvas的高度 宽度 跟随页面的大小
canvasOnresize()
//生成小圆
//初始化画笔
let ctx = canvas.getContext("2d")
//装Ball对象的数组
let ballList = []
//颜色数组
let colorList = ["red", "green", "yellow", "blue", "black", "#ccc"]
function Ball(x, y) {
this.x = x; //横轴坐标
this.y = y;//纵轴坐标
this.color = colorList[Math.floor(this.mathRandom(0, 6))];//随机生成颜色
this.xv = this.mathRandom(-5, 5);//x轴的分散速度
this.yv = this.mathRandom(-5, 5);//y轴的分散速度
this.Alpha1 = 1; //开始透明度
this.Alpha2 = 0.85;
}
//生成小球
Ball.prototype.update = function () {
ctx.save();
ctx.beginPath()
ctx.fillStyle = this.color// 背景颜色为红色
ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false)
ctx.fill()
ctx.closePath()
}
//小球移动
Ball.prototype.move = function () {
this.Alpha1*= this.Alpha2
ctx.globalAlpha = this.Alpha1 ;
this.x += this.xv
this.y += this.yv
}
//随机生成 随机数
Ball.prototype.mathRandom = function (min, max) {
return (max - min) * Math.random() + min
}
// canvas 2 鼠标移动
canvas.addEventListener('mousemove', function (e) {
ballList.push(new Ball(e.clientX, e.clientY))
})
//1 触发事件
changeBall()
function changeBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
//循环Ball实例上方法
ballList.map((item) => {
item.update()
item.move()
})
//按照电脑最优状态执行定动画效果
requestAnimationFrame(changeBall)
}
</script>

 

 
以上就是 直播视频网站源码实现鼠标移动淡入淡出Canvas小球效果的相关代码，更多内容欢迎关注之后的文章