深度选择器(能影响子组件样式)
>>> .el-input__inner
or
/deep/ .el-input__inner
`
canvas
let canvas = document.getElementById('bollCanvas');
let context = canvas.getContext('2d');
class
class Ball{
constructor(x,y,raduis,color,speedX = 3,speedY = 3){
this.x = x;
this.y = y;
this.raduis = raduis;
this.color = color;
this.speedX = speedX;
this.speedY = speedY;
}
createBall(){
context.beginPath();
context.arc(this.x,this.y,this.raduis,0,Math.PI*2);
context.fillStyle=this.color;
context.fill();
context.closePath();
}
moveBall(){
if(this.x+this.raduis >= canvas.width || this.x-this.raduis <= 0){
this.speedX = -this.speedX;
}
this.x+=this.speedX;
if(this.y+this.raduis >= canvas.height || this.y-this.raduis <= 0){
this.speedY = -this.speedY;
}
this.y+=this.speedY;
}
}
requestAnimationFrame
function updateBall(){
requestAnimationFrame(updateBall);
context.clearRect(0,0,canvas.width,canvas.height);
for (const ball of ballArray) {
ball.createBall();
ball.moveBall();
}
}
updateBall();
mounted
代码由于要获取canvas id写这里面
this.gameStart=gameStart;
这种方法可以把mounted里面的方法在其他地方用
window.innerWidth
获取窗口宽度
得到鼠标位置
window.addEventListener('mousemove',(event)=>{
this.mouseX=event.clientX;
this.mouseY=event.clientY;
})