canvas做裁剪

144 阅读1分钟

<canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        //在此处补充代码
        context.arc(200,200,200,0,Math.PI * 2,true);
        context.clip();
        context.fillStyle = "#93ec94";
        context.fillRect(0,0,200,200);

        context.fillStyle = "#7f0e7e";
        context.fillRect(200,0,200,200);

        context.fillStyle = "#fda428";
        context.fillRect(0,200,200,200);

        context.fillStyle = "#fec0cb";
        context.fillRect(200,200,200,200);
    </script>