<template>
<div class="containe">
<el-button type="primary" style="float: left;" @click="startCanvasAnimation">开始动画</el-button>
<el-button type="primary" style="float: left;" @click="stopCanvasAnimation">停止动画</el-button>
<canvas id="canvas"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
intervalId:''
}
},
methods: {
stopCanvasAnimation() {
this.intervalId && clearInterval(this.intervalId)
},
startCanvasAnimation() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = screen.availWidth
canvas.height = screen.availHeight
let str = '12345678900987654321'.split('')
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0)
this.intervalId = setInterval(() => {
this.getCanvas(canvas,ctx,str,Arr);
}, 40);
},
getCanvas(canvas,ctx,str,Arr) {
ctx.fillStyle = 'rgba(0,0,0,0.05)'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#30964e'
Arr.forEach((item, index) => {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
Arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10
})
},
}
}
</script>
