使用html5的Page Visibility API来实现控制，由于浏览器本身切换页面或者缩小带来的定时器延缓，理论上是直接停止，但是实测发现只是延缓，这导致
我们不仅需要控制定时器的开启，还需要控制关闭的时间。
页面缩小或者切换其他窗口下hidden为true，清空定时器，否则开启canvas，由于浏览器一开始虽然为false但是仍然不会
执行false下的canvas动画，需要先开启执行并且制定this访问methods下的方法，当然这种方法其实还有一种小问题，隐藏页面或者切换标题页的时候回来当前页面会重新开始计算，并不会沿着之前的动画接下去。
在vue生命周期mounted()中执行
const _this = this
_this.getTime()
//使用html5的Page Visibility API来实现控制，由于浏览器本身切换页面或者缩小带来的定时器延缓，理论上是直接停止，但是实测发现只是延缓，这导致
//我们在不仅需要控制定时器的开启，还需要控制关闭的时间。
//页面缩小或者切换其他窗口下hidden为true，清空定时器，否则开启canvas，由于浏览器一开始虽然为false但是仍然不会
//执行false下的canvas动画，需要先开启执行并且制定this访问methods下的方法
document.addEventListener('visibilitychange', function() {
_this.isHidden = document.hidden
if(_this.isHidden === false){
_this.getTime()
}else {
clearInterval(_this.timer)
clearInterval(_this.timer2)
}
})
methods下定义执行canvas动画的方法
getTime(){
//制作根据容器宽度随机生成canvas图片移动泡泡
let oc = document.querySelector('.cav')
let cxt = oc.getContext('2d')
let arr = []
let img1 = new Image()
img1.src = '/static/Finshing/paopao01.png'
let img2 = new Image()
img2.src = '/static/Finshing/paopao02.png' let
img3 = new Image()
img3.src = '/static/Finshing/paopao03.png'
this.timer = setInterval(function(){
let x = Math.random()*oc.width
let y = oc.height - 20
let r = Math.random()
let deg = 0
let step = Math.random()*20 + 10
let startX = x
let startY = y
let flog = Math.random()*3
let opacity = Math.random() arr.push({
x:x,
y:y,
r:r,
deg:deg,
step:step,
startX:startX,
startY:startY,
opacity:opacity,
flog:flog
})
},1000)
this.timer2 = setInterval(function(){
cxt.clearRect(0,0,oc.width,oc.height)
for(let i = 0;i < arr.length;i++){
arr[i].deg += 5
arr[i].x = arr[i].startX + (Math.sin(arr[i].deg*Math.PI/180))*arr[i].step
arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step
if(arr[i].y < 20){
arr.splice(i,1)
}
}
for(let i = 0;i < arr.length;i++){
cxt.beginPath()
if(arr[i].flog < 1){
cxt.drawImage(img1, arr[i].x, arr[i].y)
}else if(arr[i].flog >= 2 ){
cxt.drawImage(img2, arr[i].x, arr[i].y)
}else{
cxt.drawImage(img3, arr[i].x, arr[i].y)
} cxt.stroke()
}
},1000/60) }
网友评论