最近在學(xué)canvas做動(dòng)畫(huà)，于是就寫(xiě)個(gè)轉(zhuǎn)盤(pán)練下手。
上個(gè)簡(jiǎn)陋的成果圖（中間那個(gè)是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫(xiě)了哈哈哈）

代碼很簡(jiǎn)單，都注釋了，直接上代碼吧，嚶嚶嚶

 body  canvas id= canvas 您的瀏覽器不支持canvas /canvas  img src= ./zp.jpg alt= id= img  /body 

 style  #canvas{ position: absolute; left: 230px; top: 230px; #img{ width: 600px; height: 600px; /style 

 var canvas = document.getElementById( canvas  var context = canvas.getContext( 2d  //設(shè)定畫(huà)布和寬 canvas.width=140; canvas.height=140; var then = Date.now(); var now;//利用時(shí)間差來(lái)控制轉(zhuǎn)盤(pán)最小轉(zhuǎn)動(dòng)時(shí)間 var first_deg=0;//用來(lái)記錄轉(zhuǎn)動(dòng)的角度 var rotate_deg=0;//每次轉(zhuǎn)動(dòng)的角度，用來(lái)實(shí)現(xiàn)變速運(yùn)動(dòng) var end_deg =85;//中獎(jiǎng)角度 var speedUp = true;//判斷是否在加速階段 var f; // 因?yàn)閏anvas的rotate函數(shù)是根據(jù)左上角坐標(biāo)（0,0）來(lái)旋轉(zhuǎn)的，所以移動(dòng)畫(huà)布 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.fill >
最后
現(xiàn)在這個(gè)轉(zhuǎn)盤(pán)比較大的問(wèn)題就是，如果中獎(jiǎng)區(qū)間比較小，那減速后轉(zhuǎn)動(dòng)的時(shí)間就長(zhǎng)一些，最低速度轉(zhuǎn)很久才停下。當(dāng)區(qū)間大的時(shí)候一下子就停下了，減速效果不明顯，視覺(jué)上看起來(lái)很奇怪。
相關(guān)文章推薦：
html5 canvas用來(lái)繪制弧形的代碼實(shí)現(xiàn)
HTML5實(shí)現(xiàn)魔方游戲的代碼
HTML5結(jié)合互聯(lián)網(wǎng)+ 實(shí)現(xiàn)的3D隧道（附代碼）
以上就是HTML5 canvas實(shí)現(xiàn)中獎(jiǎng)轉(zhuǎn)盤(pán)的實(shí)例代碼的詳細(xì)內(nèi)容，其它編程語(yǔ)言        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。