使用html5的Page Visibility API來實(shí)現(xiàn)控制，由于瀏覽器本身切換頁面或者縮小帶來的定時器延緩，理論上是直接停止，但是實(shí)測發(fā)現(xiàn)只是延緩，這導(dǎo)致
我們不僅需要控制定時器的開啟，還需要控制關(guān)閉的時間。
頁面縮小或者切換其他窗口下hidden為true，清空定時器，否則開啟canvas，由于瀏覽器一開始雖然為false但是仍然不會
執(zhí)行false下的canvas動畫，需要先開啟執(zhí)行并且制定this訪問methods下的方法，當(dāng)然這種方法其實(shí)還有一種小問題，隱藏頁面或者切換標(biāo)題頁的時候回來當(dāng)前頁面會重新開始計算，并不會沿著之前的動畫接下去。
在vue生命周期mounted()中執(zhí)行
const _this = this
_this.getTime()
//使用html5的Page Visibility API來實(shí)現(xiàn)控制，由于瀏覽器本身切換頁面或者縮小帶來的定時器延緩，理論上是直接停止，但是實(shí)測發(fā)現(xiàn)只是延緩，這導(dǎo)致
//我們在不僅需要控制定時器的開啟，還需要控制關(guān)閉的時間。
//頁面縮小或者切換其他窗口下hidden為true，清空定時器，否則開啟canvas，由于瀏覽器一開始雖然為false但是仍然不會
//執(zhí)行false下的canvas動畫，需要先開啟執(zhí)行并且制定this訪問methods下的方法
document.addEventListener('visibilitychange', function() {
????_this.isHidden = document.hidden
????if(_this.isHidden === false){
????????_this.getTime()
????}else {
????????clearInterval(_this.timer)
????????clearInterval(_this.timer2)
????}
})
methods下定義執(zhí)行canvas動畫的方法
getTime(){
????//制作根據(jù)容器寬度隨機(jī)生成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) }
