个人中心
gpt4 book ai didi

javascript - 使用 Javascript 添加到正文时 HTML5 Canvas 会重置

转载 作者：行者123 更新时间：2023-11-28 08:07:55 25 4
gpt4 key购买 nike

所以，我目前正在开发一款 HTML5 游戏，该游戏使用 canvas 元素作为“积分桶”，这是用户获得的积分数量的视觉衡量标准。但是，当我向 HTML 文档正文添加元素时， Canvas 会发生一些奇怪的情况

因此，当使用 javascript (document.body.innerHTML = "whatever";) 写入正文时， Canvas 将删除其自身内的所有内容并重置。这是我为了向您展示我的意思而编写的一个快速而肮脏的示例:

<!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 的传统方法是像这样分配 Canvas 宽度:

canvas.width = canvas.width;

这是达到相同效果的另一种方法还是只是一个错误？有人可以给我一些关于这个的见解吗？谢谢。

最佳答案

执行innerHTML += some意味着内容作为字符串检索，将一些内容添加到该字符串中，然后将整个内容分配给正文，然后重新计算它的(布局)。 (并且事件监听器被删除 - 除非它们是内联处理程序)

您应该使用面向对象的函数来实现相同的目的。即 

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

这将使您的 Canvas 保持不变。

关于javascript - 使用 Javascript 添加到正文时 HTML5 Canvas 会重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24621810/

25 4 0
文章推荐： c# - 提示用户下载文本文件 - API Controller C#
文章推荐： html - 没有 JQuery 的嵌套 DIV 的替代颜色
文章推荐： jquery - 禁用模态表单的自动关闭
文章推荐： javascript - Cloudinary cl_image_upload 与 cl_image_upload_tag
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com