今天簡單複習一下 translate 與 rotate 用法，試著畫圓餅

不免俗的設置 canvas 畫布

wheelCanvas = document.getElementById('wheelCanvas')
ctx = wheelCanvas.getContext('2d');
var ww = wheelCanvas.width = window.innerWidth;
var wh = wheelCanvas.height = window.innerHeight;

想讓背景鋪上淡淡的灰色

ctx.fillStyle = '#faf7f8';
ctx.fillRect(0, 0, ww, wh);

在畫面中央畫個圓

ctx.fillStyle = '#fcd2dc';
ctx.arc(ww/2 , wh/2, 300, 0, Math.PI * 2);
ctx.fill();

再來才是今天主要練習的部分啦

ctx.save();
    // 將初始座標 ww/2 , wh/2 設為新座標 0,0 的所在地 
    ctx.translate(ww/2 , wh/2);
    ctx.beginPath();
        // 記得要移動到等等要畫的圓心
        ctx.moveTo(0,0)

        // 畫六分之一個圓
        ctx.arc(0, 0, 300, 0, Math.PI * 2 / 6);
        ctx.fillStyle = '#1460db';
        ctx.fill();
    ctx.closePath();

    // 將整個座標軸旋轉列分之一個圓的角度
    ctx.rotate(Math.PI * 2 / 6);
    ctx.beginPath();
        // 記得要移動到等等要畫的圓心
        ctx.moveTo(0,0)

        // 畫六分之一個圓
        ctx.arc(0, 0, 300, 0, Math.PI * 2 / 6);
        ctx.fillStyle = '#f72d5c';
        ctx.fill();
    ctx.closePath();
ctx.store();

簡單的小練習，如果觀念有出入的部分，或有其他有趣做法都希望經過的朋友幫忙提點一下了感謝 ε= ᕕ( ᐛ )ᕗ