Cocos2dx 利用ClippingNode 做遮罩

var size = cc.Director.getInstance().getWinSize();

        var clipper = cc.ClippingNode.create();

        clipper.setContentSize(600, 600);

        clipper.setAnchorPoint(0.5, 0.5);

        clipper.setPosition(size.width / 2, size.height / 2);

        

        var stencil = cc.DrawNode.create();

        stencil.setPosition(clipper.getContentSize().width / 2, clipper.getContentSize().height / 2);

        var rectangle = new Array();

        

        // 遮罩为圆形，，因为只能用多边形来遮罩，所以用以下方法画出圆

        var white = cc.c4f(1, 0, 0, 1);

        var radius= 200.0; // 半径

        var ncount = 1000; // 圆的边上的像素点个数

        var angel = 2 * Math.PI/ncount; // 算出每个角度

        

        for(var i = 0;i<ncount;i++){

            var radian = i*angel;

            var p = cc.p(radius * Math.cos(radian),radius * Math.sin(radian));

            rectangle.push(p);

        }

        

        stencil.drawPoly(rectangle, white, 1, white);

        clipper.setStencil(stencil);

        var content = cc.Sprite.create("bg.png");

        content.setAnchorPoint(0.5, 0.5);

        content.setPosition(clipper.getContentSize().width / 2, clipper.getContentSize().height / 2);

        clipper.addChild(content);

        this.addChild(clipper);