本篇文章給大家帶來的內容是關于HTML5 canvas實現中獎轉盤的實例代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

最近在學canvas做動畫，于是就寫個轉盤練下手。

上個簡陋的成果圖(中間那個是轉的指針，外面的圈是圖片，懶得寫了哈哈哈)

代碼很簡單，都注釋了，直接上代碼吧，嚶嚶嚶

html

您的瀏覽器不支持canvas

css

#canvas{

position: absolute;

left: 230px;

top: 230px;

}

#img{

width: 600px;

height: 600px;

}

jsvar canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

//設定畫布和寬

canvas.width=140;

canvas.height=140;

var then = Date.now();

var now;//利用時間差來控制轉盤最小轉動時間

var first_deg=0;//用來記錄轉動的角度

var rotate_deg=0;//每次轉動的角度，用來實現變速運動

var end_deg =85;//中獎角度

var speedUp = true;//判斷是否在加速階段

var f;

// 因為canvas的rotate函數是根據左上角坐標(0,0)來旋轉的，所以移動畫布

context.translate(70,70);

function draw(){

context.clearRect(-70, -70, 70, 70);

context.beginPath();

context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);

context.moveTo(-50,0);

context.lineTo(50,0);

context.lineTo(0,-70);

context.rotate(rotate_deg*Math.PI/180);

context.closePath();

context.fillStyle='red';

context.fill();

}

// 將運動分為3段，加速，勻速，減速

function loop(){

//循環調用，產生動畫效果

f = window.requestAnimationFrame(loop);

now = Date.now();

//開始加速轉動，轉到速度為20就不加速了，至于為什么是20，看起來舒服而已

if(rotate_deg<=20&&speedUp){

rotate_deg +=1;

};

//2s后開始減速(即最小轉動時間)，減速是為了視覺上的美觀

if(now - then > 2000){

//如果下面設置的是固定角度，那這里的最小速度建議為1，因為每次轉動角度過大，一圈很可能錯過中獎的角度，導致轉很多圈。

if(rotate_deg>=2){

speedUp = false;

rotate_deg -=1;

}

//設置中獎區間為+-5度(設置固定角度會讓動畫有點難看)

if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){

window.cancelAnimationFrame(f);//停止循環

//中獎操作

}

};

first_deg += rotate_deg;//記錄轉過的角度

draw();//繪制圖形

}

loop();

最后

現在這個轉盤比較大的問題就是，如果中獎區間比較小，那減速后轉動的時間就長一些，最低速度轉很久才停下。當區間大的時候一下子就停下了，減速效果不明顯，視覺上看起來很奇怪。

相關文章推薦：

總結

以上是生活随笔為你收集整理的h5大转盘 php,HTML5 canvas实现中奖转盘的实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。