VueCl项目Code记录第二天(canvas)

最新推荐文章于 2024-10-14 16:02:31 发布

原创最新推荐文章于 2024-10-14 16:02:31 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

mygal 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了深度选择器在Vue中的应用，用于修改子组件样式。同时，深入讲解了利用Canvas实现球体动画的全过程，包括球体的创建、移动及边界检测。

深度选择器(能影响子组件样式)

>>> .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; 
    })