KineticJS mouse over canvas удалить

Question

Я пытаюсь сделать онлайн-игру в Интернете. Я хочу, чтобы иметь возможность создавать куб внутри холста, и когда вы hoover над ним, я хочу, чтобы он был удален.

Я newcorner на 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); 

Answer 1

context.clearRect используется в html5 холст, чтобы перезаписать часть холста, но он не применяется при использовании KineticJS.

В KineticJS, ваш прямоугольник является объектом, так что вы бы удалить этот прямоугольник так:

// 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() 

удачи с вашей игрой!