彈跳球

回想多年以前的鐵人賽，我好像也做過彈跳球的動畫CSS彈跳球，而今天做的跟之前的差別在哪呢？就是今天的能用程式控制動畫，包含觸發的時間跟球速等等。所以今天來做個更進階的加上球速的彈跳球吧～

預設資料

start:true,//是否開始丟球
balling:false,//是否丟球中
ctx:null,
posX:25,//一開始球的Ｘ座標
posY:25,//一開始球的Ｙ座標
radius:25,//球半徑
color:"blue",//球顏色
vx:2,//預設球的X軸速度
vy:2//預設球的Ｙ軸速度

畫球

drawBall(){
 this.ctx.beginPath()
 this.ctx.arc(this.posX,this.posY,this.radius,0,Math.PI*2,true)
 this.ctx.fillStyle=this.color
 this.ctx.fill()
},

丟起來！

在這邊我犯了一個很蠢的錯誤，一開始我的球會一直超出畫布一點點，一直在想為什麼，後來才想到posX和posY是球的圓心位置，所以圓心可以到的Ｙ軸最底位置其實是畫布的高 - 球的半徑，自己都把前幾天自己寫的圓的畫法忘記了ＱＱ。球的畫法看這裡

draw(){
    //產生動畫，也就是讓球丟下來
    this.start=false
    this.balling=true
    this.ctx.clearRect(0,0,600,300)
    this.drawBall(this.ctx)
      
    //設定Ｙ軸速度隨著時間變長速度愈來愈少
    this.vx*=.99
    //設定畫布Ｘ軸邊界，讓球的位置到畫布邊界時擋住
    if(this.posX+this.vx>600-this.radius || this.posX+this.vx<this.radius){
      this.vx=-(this.vx)
    }
    this.posX+=this.vx
      
    //設定Ｙ軸速度隨著時間變長速度愈來愈少
    this.vy*=.99
    this.vy+=.25
    //設定畫布Ｙ軸邊界，讓球的位置到畫布邊界時擋住
    if(this.posY+this.vy>300-this.radius || this.posY+this.vy<this.radius){
      this.vy=-(this.vy)
    }

    this.posY+=this.vy
    raf=window.requestAnimationFrame(this.draw)
   }

小小範例

codepen範例連結
成果畫面：

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
[2]https://www.w3school.com.cn/tags/html_ref_canvas.asp
[3]https://www.runoob.com/w3cnote/html5-canvas-intro.html
[4]http://caibaojian.com/canvas-draw-circle-line.html