canvas乙個簡單粗暴的中獎轉盤

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

上個簡陋的成果圖（中間那個是轉的指標，外面的圈是，懶得寫了哈哈哈）

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

您的瀏覽器不支援canvas

var 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()
// 將運動分為3段，加速，勻速，減速
function loop();
//2s後開始減速（即最小轉動時間），減速是為了視覺上的美觀
if(now - then > 2000)
//設定中獎區間為+-5度（設定固定角度會讓動畫有點難看）
if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5)
};first_deg += rotate_deg;//記錄轉過的角度
draw();//繪製圖形
} loop();

**寫得很粗糙，實現方法也是自己剛想了就擼了，可能很多地方沒考慮好，望諒解。

乙個canvas中strokeStyle的疑問

這個效果是圓弧是紅色，但是如果strokestyle在後面，就不會顯示紅色。為什麼？cans.linewidth 10 cans.stroke cans.strokestyle red canvas中的常用命令 canvas畫布設定width和height，裡面的xy是相對畫布的左上角開始0,0.l...

Canvas 實現乙個時鐘

使用canvas實現另乙個小時鐘，效果圖如下 前端html canvas not supported 下面是example.js的具體實現 var canvas document.getelementbyid canvas var context canvas.getcontext 2d var f...

html5的canvas寫乙個簡單的畫板程式

html5的canvas寫乙個簡單的畫板程式 思路 獲得按下時候的座標ctx.moveto e.clientx 10,e.clienty 10 然後滑鼠移動的時候就不斷的畫線，isdown ctx.lineto e.clientx 10,e.clienty 10,5,5 滑鼠放開的時候，自然就要吧i...