canvas 裁切路径 Clipping paths

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。

和 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop 差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

clip() 我们用 clip 方法来创建一个新的裁切路径。默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。

用一个圆形的裁切路径来限制随机星星的绘制区域。

首先，画一个与 canvas 一样大小的黑色方形作为背景，然后移动原点至中心点。然后用 clip 方法创建一个弧形的裁切路径。裁切路径也属于 canvas 状态的一部分，可以被保存起来。如果我们在创建新裁切路径时想保留原来的裁切路径，我们需要做的就是保存一下 canvas 的状态。

裁切路径创建之后所有出现在它里面的东西才会画出来。在画线性渐变时这个就更加明显了。然后在随机位置绘制 50 大小不一（经过缩放）的颗，当然也只有在裁切路径里面的星星才会绘制出来。

    <script type="text/javascript">
        draw();
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            //绘制150*150大小的图形甲，并将画板圆心移至该图形中心
            ctx.fillRect(0,0,150,150);
            ctx.translate(75,75);

            // Create a circular clipping path
            ctx.beginPath();
            ctx.arc(0,0,60,0,Math.PI*2,true);
            //ctx.fillRect(-20, -20, 20, 20);
            ctx.clip();

            // draw background
            var lingrad = ctx.createLinearGradient(0,-75,0,75);
            lingrad.addColorStop(0, '#232256');
            lingrad.addColorStop(1, '#143778');
            //给图形甲加背景lingrad
            ctx.fillStyle = lingrad;
            ctx.fillRect(-75,-75,150,150);

            // draw 50 stars
            for (var j=1;j<50;j++){
                ctx.save();
                ctx.fillStyle = '#fff';
                //以图形甲内随机位置为圆心
                ctx.translate(75-Math.floor(Math.random()*150), 75-Math.floor(Math.random()*150));
                drawStar(ctx,Math.floor(Math.random()*4)+2);
                ctx.restore();
            }

        }
        function drawStar(ctx,r){
            ctx.save();
            ctx.beginPath()
            ctx.moveTo(r,0);
            for (var i=0;i<9;i++){
                ctx.rotate(Math.PI/5);                      //画五角星的某个角
                if(i%2 == 0) {
                    ctx.lineTo((r/0.525731)*0.200811,0);    //没看明白？？？？？？
                } else {
                    ctx.lineTo(r,0);                        //没看明白？？？？？？
                }
            }
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    </script>

有些代码没看明白。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing