使用Javascript添加到主体时HTML5画布重置_Javascript_Html_Canvas_Html5 Canvas_Document Body

使用Javascript添加到主体时HTML5画布重置

javascript html canvas html5-canvas

使用Javascript添加到主体时HTML5画布重置,javascript,html,canvas,html5-canvas,document-body,Javascript,Html,Canvas,Html5 Canvas,Document Body,因此，我目前正在开发一款HTML5游戏，它使用画布元素作为点数桶，这是一种直观的测量用户获得点数的工具。但是，当我向HTML文档体添加元素时，画布上发生了一些奇怪的事情因此，当使用javascript document.body.innerHTML=which；，向主体写入时；，画布将擦除自身中的所有内容并重置。下面是一个快速而肮脏的例子，我已经向你展示了我的意思： <!DOCTYPE HTML> <html> <body> <canvas i

因此，我目前正在开发一款HTML5游戏，它使用画布元素作为点数桶，这是一种直观的测量用户获得点数的工具。但是，当我向HTML文档体添加元素时，画布上发生了一些奇怪的事情

因此，当使用javascript document.body.innerHTML=which；，向主体写入时；，画布将擦除自身中的所有内容并重置。下面是一个快速而肮脏的例子，我已经向你展示了我的意思：

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="a"></canvas>
    <script type = "text/javascript">

    function addToBody()
    {
        document.body.innerHTML += "<p>I am adding to the body</p>";
    }

    var can = document.getElementById("a");
    var con = can.getContext("2d");

    //Draw rectangle on canvas
    con.fillRect(0,50,100,100);

    //Add text to body after 5 seconds
    setTimeout("addToBody()",5000);

    </script>

</body>
</html>

这是实现相同效果的另一种方式，还是仅仅是一个bug？有人能给我一些关于这方面的见解吗？谢谢。

执行innerHTML+=something意味着内容作为字符串检索，向该字符串添加一些内容，然后将整个批次分配给正文，然后重新计算正文的布局。事件侦听器会被删除，除非它们是内联处理程序

您应该使用面向对象的函数来实现同样的功能。即

这将使您的画布保持不变

canvas.width = canvas.width;

var newElem = document.createElement('p'); 
newElem.appendChild( document.createTextNode('I am adding to the body') );
document.body.appendChild(newElem);