Day03 - 复习 canvas translate 与 rotate

今天简单复习一下 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();

简单的小练习，如果观念有出入的部分，或有其他有趣做法都希望经过的朋友帮忙提点一下了感谢 ε= ᕕ( ᐛ )ᕗ