JavaScript/HTML Canvas : clearing a text box

Question

我一直在尝试通过 HTML5 Canvas 使用 Adob​​e Flash CC 创建交互式 map 。主要思想:将鼠标悬停在 map 上的某个对象上，带有相应信息的文本框会出现在右侧。问题是，我已经成功创建了一个文本框，但是每次我将鼠标悬停在文本框上时，文本框都会一遍又一遍地出现在顶部，并且文本每次都变得越来越厚。每次添加文本之前如何删除文本？也许您还有其他建议？ 代码如下:

function makeText(x, y, w, h, htmlText) {
// create and populate element
stage.removeChild(content);
stage.update();
var e = document.createElement("div");
e.style.fontSize = "14px";
e.style.fontFamily = "arial, verdana, sans-serif";
e.style.visibility = "hidden";
e.style.position = "absolute";
e.style.left = 0;
e.style.top = 0;
e.style.width = w + "px";
e.style.height = h + "px";
e.style.overflow = "auto";
e.style.overflowX = "hidden";
e.innerHTML = htmlText;

document.body.appendChild(e);
var content = new createjs.DOMElement(e);
content.x = x;
content.y = y;

return stage.addChild(content);
}

这是我调用该函数的方式:

  function fl_MouseOverHandler_5(){
    var canvas; 
    var text;
    var count = 0; 
 var kauno_pr = "text";
makeText(400,300,200,200,kauno_pr);   
}

我还尝试添加 stage.removeChild(content);添加之前，但它似乎不起作用。

任何帮助表示赞赏!

Answer 1

这样的事情应该有效:

var previousElement;
function fl_MouseOverHandler_5(){
    var canvas; 
    var text;
    var count = 0; 
    var kauno_pr = "text";

    if(previousElement){
        stage.removeChild(previousElement);
    }

    previousElement = makeText(400,300,200,200,kauno_pr);   
}

您只需将创建的元素存储在变量中即可。