今天更新了輪子讓玩家點擊頁面時輪子會轉動，而轉速利用 Math.log(t) 達到先快後慢的漸慢效果

var Wheel = function (){
    this.t = 0;
    this.roll = false;
    this.level;
    this.stopLevel;
    this.update();
    this.render();
};

Wheel.prototype.rollToStop = function () {
    this.roll = !this.roll;

    // 時間記得歸零
    // render 轉速漸慢效果才能透過 ln(t) 讓轉速從高速的 t0 開始漸慢
    this.t = 0;

    // 轉速倍速為 5 ~ 10 的隨機數
    this.level = parseInt(Math.random() * 10) + 5 ;

    // 停止倍速為 3 ~ 6 的隨機數
    this.stopLevel = parseInt(Math.random() * 3) + 3 ;
    
    // 設定定時停止
    // 記得使用箭頭函數，確保 this 指向 wheel
    setTimeout(()=>{
        this.roll = false;
    },this.stopLevel * 1000)

    console.log('level:'+ this.level, 'stopLevel:'+ this.stopLevel) 
    
};

Wheel.prototype.update = function (){
    // 輪子轉的時候才更新轉動時間
    if (this.roll){
        this.t++;
    }
    setTimeout(()=>{this.update()});
}


Wheel.prototype.render = function (){
    // 鋪好畫布
    this.wheelCanvas = document.getElementById('wheelCanvas')
    this.ctx = this.wheelCanvas.getContext('2d');
    this.ww = this.wheelCanvas.width = window.innerWidth;
    this.wh = this.wheelCanvas.height = window.innerHeight;

    // 畫上背景底色
    this.ctx.fillStyle = '#faf7f8';
    this.ctx.fillRect(0, 0, this.ww, this.wh);

    // 畫上圓形輪子
    this.ctx.fillStyle = '#fcd2dc';
    this.ctx.arc(this.ww/2 , this.wh/2, 300, 0, Math.PI * 2);
    this.ctx.fill();

    this.ctx.save();
        // 將初始座標 this.ww/2 , this.wh/2 設為新座標 0,0 的所在地 
        this.ctx.translate(this.ww/2 , this.wh/2);

        // 座標軸依照時間旋轉
        // 透過將時間取 ln 達到轉速漸慢效果
        // 透過乘上我們自訂的整數讓旋轉力道加大
        this.ctx.rotate(Math.log(this.t)*this.level);

        // 畫六分之一個圓
        this.ctx.beginPath();
            // 記得要移動到等等要畫的圓心
            this.ctx.moveTo(0,0)
            this.ctx.arc(0, 0, 300, 0, Math.PI * 2 / 6);
            this.ctx.fillStyle = '#1460db';
            this.ctx.fill();
        this.ctx.closePath();
        
        // 畫六分之一個圓
        this.ctx.beginPath();
            // 記得要移動到等等要畫的圓心
            this.ctx.moveTo(0,0)
            this.ctx.arc(0, 0, 300, Math.PI * 2 / 6, Math.PI * 2 / 6 * 2);
            this.ctx.fillStyle = '#f72d5c';
            this.ctx.fill();
        this.ctx.closePath();
    this.ctx.restore();
    requestAnimationFrame(()=>this.render());
};


var wheel = new Wheel();

wheelCanvas.addEventListener('click', function(){
    wheel.rollToStop();
})

看輪子轉看得頭有點暈，如果內容有誤或有其他做法，希望路過的俠客能多多提點了 ε= ᕕ( ᐛ )ᕗ