vue + canvas画布鼠标出发画不同颜色圆

<template>
  <div class="demo">
    <div class="canvas1">
			<canvas class="myCanvas" width="800" height="500" ref="myCanvas"></canvas>
		</div>
  </div>
</template>
<script>
export default {
  name: 'slideshow',
  data () {
    return {
    }
  },
	mounted  () {
		this.myCanvas1()
	},
  methods: {
    myCanvas1() {
			// 得到到画布
			// var canvas = document.getElementById('myCanvas')
			var canvas = this.$refs.myCanvas
			// 获取上下文
			var ctx = canvas.getContext("2d")
			// 绘制圆弧
			// ctx.beginPath()
			// // false表示顺时针 true为逆时针方向 7或2*Math.PI 表示一个圆 顺时针方向
			// ctx.arc(200,200,100,0,2*Math.PI,false)
			// ctx.stroke()
			// ctx.fillStyle ='orange'
			// ctx.fill()

			// 炫彩小球
			// 球类
			function Ball(x,y,r) {
				this.x = x;
				this.y = y
				// 初始半径
				this.r = r
				// 设置随机颜色
				this.color = getRandom()
				// 设置行进方向
				this.dx = parseInt(Math.random()*10) -5
				// 设置行进方向
				this.dy = parseInt(Math.random()*10) - 5
				// 将这个小球维护到
				ballArr.push(this)
			}
			Ball.prototype.updata = function () {
				// 小球运动
				this.x += this.dx;
				this.y += this.dy
				this.r -= 0.4
				// 小球半径小于0，从数组中删除
				if (this.r <= 0) {
					this.remove()
				}
			}
			// 随机颜色
			function getRandom () {
				var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'
				var allTypeArr = allType.split(",")
				var color = "#"
				for (var i = 0;i<6;i++) {
					var random = parseInt(Math.random() * allTypeArr.length)
					color += allTypeArr[random]
				}
				return color
			}
			// 渲染小球
			Ball.prototype.render = function () {
				ctx.beginPath()
				ctx.arc(this.x,this.y,this.r,0,Math.PI * 2, false)
				ctx.fillStyle = this.color
				ctx.fill()
			}
			// canvas设置鼠标监听 鼠标移动创建小球
			canvas.addEventListener("mousemove",function(event) {
				new Ball(event.offsetX,event.offsetY,30)
			})
			// 删除小球
			Ball.prototype.remove = function () {
				for(var i = 0; i< ballArr.length;i++) {
					if (ballArr[i] == this) {
						ballArr.splice(i,1)
					}
				}
			}
			var ballArr = []
			// 定时器进行渲染更新
			setInterval(function(){
				// 动画逻辑 清屏 更新 渲染
				ctx.clearRect(0,0,canvas.width,canvas.height)
				for(var i = 0; i<ballArr.length;i++) {
					ballArr[i].updata()
					if (ballArr[i]) {
						ballArr[i].render()
					}
				}
			},50)
		},
		
		
		
  }
}
</script>
<style scoped>
canvas {
	border: 1px solid #114211;
}
</style>

canvas画布，记录一下