KineticJS鼠标悬停在画布上

时间:2014-03-19 11:24:28

标签: canvas kineticjs mouseover

我正在尝试在线网络游戏。 我希望能够在画布中生成一个立方体,当你翻过它时,我希望它被移除。

我是Javascript的新角色,但到目前为止这是我的代码

    var stage = new Kinetic.Stage({
        container: 'gamebox', //Find an HTML element
        width: 553,
        height: 498
    });

    var layer = new Kinetic.Layer(); // Don't know what this shit is doing

    var numEvents = 0;

    var rect = new Kinetic.Rect({ // Create a cube
        x: 239,
        y: 75,
        width: 50,
        height: 50,
        fill: 'green',
    });

    rect.on('mouseover mousedown mouseup', function() {
        numEvents=++numEvents;
        document.getElementById("energycollector").innerHTML=numEvents;
        context.clearRect ( 239 , 75 , 50 , 50 );
    });

    // add the shape to the layer
    layer.add(rect);
    // add the layer to the stage
    stage.add(layer);

1 个答案:

答案 0 :(得分:0)

context.clearRect在html5画布中用于覆盖画布的一部分,但在使用KineticJS时不适用。

在KineticJS中,你的rect是一个对象,所以你要删除那个矩形:

// to remove the rect, but not destroy it (you could later re-add it to the layer)

rect.remove();

// OR, to remove and destroy the rect

rect.destroy()

祝你好运!