如何在 cocos2d -js 里实现 canvas 的擦除效果？

Cocos2d-x JavaScript
#1

之前看到过 用 canvas 实现的擦除效果。问问大家能不能使用cocos的 api实现这个效果呢？
这是在网上看到的一个例子，就是要实现这种效果
http://www.jsshare.com/demoshow/151/html5-clip-pic

#2

找到了一篇帖子，使用的是 cc.RenderTexture 和 blendFunc
代码如下：

var HelloWorldLayer = cc.Layer.extend({
sprite:null,
pEraser:null,
pRTex:null,

ctor:function () {  
    //////////////////////////////  
    // 1. super init first  
    this._super();  

    var size = cc.winSize;  

    // add a "close" icon to exit the progress. it's an autorelease object  
    var closeItem = new cc.MenuItemImage(  
        res.CloseNormal_png,  
        res.CloseSelected_png,  
        function () {  
            cc.log("Menu is clicked!");  
        }, this);  
    closeItem.attr({  
        x: size.width - 20,  
        y: 20,  
        anchorX: 0.5,  
        anchorY: 0.5  
    });  

    var menu = new cc.Menu(closeItem);  
    menu.x = 0;  
    menu.y = 0;  
    this.addChild(menu, 1);  

    /////////////////////////////  
    // 3. add your codes below...  
    // add a label shows "Hello World"  
    // create and initialize a label  
    var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);  
    // position the label on the center of the screen  
    helloLabel.x = size.width / 2;  
    helloLabel.y = size.height / 2;  
    // add the label as a child to this layer  
    this.addChild(helloLabel, 5);  

    // hello world 背景图片  
    this.sprite = new cc.Sprite(res.HelloWorld_png);  
    this.sprite.attr({  
        x: size.width / 2,  
        y: size.height / 2,  
    });  
    this.addChild(this.sprite, 0);  
      
    //橡皮擦  
    this.pEraser = new cc.DrawNode();     
    this.pEraser.drawDot(cc.p(0, 0), 20, cc.color(255, 255, 255, 0));  
    this.pEraser.retain();  
      
    //通过pRTex实现橡皮擦  
    this.pRTex = new cc.RenderTexture(size.width,size.height);  
    this.pRTex.setPosition(size.width/2, size.height/2);  
    this.addChild(this.pRTex, 10);  
      
    //加载等待被擦除的图片  
    var pBg = new cc.Sprite(res.dirt_png);  
    pBg.setPosition(size.width/2, size.height/2);  
    this.pRTex.begin();  
    pBg.visit();  
    this.pRTex.end();  

      
      
    cc.eventManager.addListener({             
        event: cc.EventListener.TOUCH_ONE_BY_ONE,         
        onTouchBegan:function(touches, event){  
            cc.log("start");  
            var target = event.getCurrentTarget();  
            return true;  
        },            
        onTouchMoved:function (touch, event) {  
            var target = event.getCurrentTarget();  
            target.pEraser.setPosition(touch.getLocation());  
            target.eraseByBlend();  
        }  
    }, this);  
      
    return true;  
},  
  
eraseByBlend :function()  
{  
    this.pEraser.setBlendFunc(cc.GL_ONE_MINUS_SRC_ALPHA, cc.ZERO);    
    this.pRTex.begin();  
    this.pEraser.visit();  
    this.pRTex.end();  
}

});

但任然实现不了擦除的效果不知道是哪里的问题

#3

我之前做过一个。 这个是 设置的参数，你试一下
pEraser.drawDot(cpos, 25, cc.color(0, 0, 0, 255)); //alpha 设 255
var blendfunc = {src: cc.ZERO, dst: cc.ONE_MINUS_SRC_ALPHA};
pEraser.setBlendFunc(blendfunc);

#4

嗯，试了一下，可以了。不过cocos 的这个擦除，只能是在 webgl模式下， 需要把 “renderMode” : 1, 设置为1，在手机上就不好使了，好多手机目前还不支持webgl

#5

请问版主这擦除功能如何判断擦除完毕呢？ 我试过像素判断，但是在循环的时候直接卡死，不知为什么，lz可否做了擦除完毕功能，能否告知下