直播視訊網站原始碼實現滑鼠移動淡入淡出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小球效果的相關程式碼，更多內容歡迎關注之後的文章