Day04 - 微调让昨天的轮盘转起来

今天微调让整个轮盘转动

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


var t = 0;
function draw(){
    t++;

    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.rotate(Math.PI * 2 * t / 50);

        ctx.beginPath();
            // 记得要移动到等等要画的圆心
            ctx.moveTo(0,0)

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

        ctx.beginPath();
            // 记得要移动到等等要画的圆心
            ctx.moveTo(0,0)

            // 画六分之一个圆
            ctx.arc(0, 0, 300, Math.PI * 2 / 6, Math.PI * 2 / 6 * 2);
            ctx.fillStyle = '#f72d5c';
            ctx.fill();
        ctx.closePath();
    ctx.restore();
    requestAnimationFrame(draw)
};

draw()

可恶今天时间花太少，明天让轮盘有按钮可以控制开始动，与停止动

若内容有出入都在麻烦提点了ε= ᕕ( ᐛ )ᕗ