Сброс HTML5 Canvas при добавлении в тело с помощью Javascript

Итак, в настоящее время я работаю над игрой HTML5, в которой элемент холста используется как «ведро точек», визуальный индикатор количества очков, набранных пользователем. Но что-то странное происходит с холстом, когда я добавляю элемент в тело HTML-документа.

Итак, при записи в тело с помощью javascript (document.body.innerHTML = "something";) холст сотрет все внутри себя и сбросит настройки. Вот быстрый и грязный пример, который я придумал, чтобы показать вам, что я имею в виду:

<!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>

Я знаю, что традиционный способ сбросить холст - это назначить ширину холста следующим образом:

canvas.width = canvas.width;

Это еще один способ добиться того же эффекта или просто ошибка? Может кто-нибудь дать мне некоторое представление об этом? Спасибо.


javascript canvas html html5-canvas document-body
person PacMan    schedule 08.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Выполнение innerHTML + = something означает, что содержимое извлекается в виде строки, что-то добавляется к этой строке, затем весь участок назначается телу, после чего (макет) все это пересчитывается. (и слушатели событий удаляются - если они не являются встроенными обработчиками)

Вы должны использовать объектно-ориентированные функции, чтобы добиться того же. Т.е.

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

Это оставит ваш холст нетронутым.

person enhzflep    schedule 08.07.2014