var num = 6; // 獎品數量 var canvas = document.getElementById('canvas'); var
btn = document.getElementById('btn'); if(!canvas.getContext){
alert('抱歉！瀏覽器不支持。'); return; } // 獲取繪圖上下文 var ctx = canvas.getContext('2d'); for
(var i = 1; i <= num; i++) { // 保存當前狀態 ctx.save(); // 開始壹條新路徑
ctx.beginPath(); // 位移到圓心，下面需要圍繞圓心旋轉 ctx.translate(150, 150); // 從(0,
0)坐標開始定義壹條新的子路徑 ctx.moveTo(0, 0); // 旋轉弧度,需將角度轉換為弧度,使用 degrees * Math.PI/180
公式進行計算。 ctx.rotate(360 / num * i * Math.PI/180); // 繪制圓弧 ctx.arc(0, 0, 150, 0, 2
* Math.PI / num, false); if (i % 2 == 0) { ctx.fillStyle = '#ffb820'; }else{
ctx.fillStyle = '#ffcb3f'; } // 填充扇形 ctx.fill(); // 繪制邊框 ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24'; ctx.stroke(); // 恢復前壹個狀態 ctx.restore(); }