需要说明下面的画布答案

【问题标题】：Need Explanation about below canvas需要说明下面的画布
【发布时间】：2012-03-13 06:12:48
【问题描述】：

我正在尝试使用 Html5+jquery 开发 iphone 应用程序，所以我选择了一个框架名称作为 jquery mobile。更多的是我对 Html5 和 jquery 的新手。好的，现在我的问题是，我有一个带有 id 背景的属性画布，在那个画布上我需要像这样制作 4 个框（单元格）。

当我使用 <div> 属性时，会出现这些盒子，如果我在 HTML 中使用 <canvas> 而不是 <div>，盒子不会出现。这里面临什么问题？

我的html：

<div id="background"> </div>

我的CSS：

#background{
    position:relative;
    background-image:url(../images/bg.jpg);
    width:300px;
    height:300px;
    border:2px solid #FFF;
}

#background .cell{
    cursor: pointer;
    float: left;
    border: 1px solid #CCC;
    width: 148px;
    height: 148px;
    line-height: 148px;
    font-size: 30px;
    text-align: center;
}

我的jQuery：

var columns = rows = 2;

$(document).ready(function() {
    initGame();
});

function initGame()
{
    for(i=0; i<columns*rows; i++)
    {
        var cell = $("<div></div>").addClass("cell").addClass("unselected").appendTo("#background");
        if(i%columns == 0)
        {
            cell.before('<div class="clear"></div>');
        }
    }
}

我只是替换 <canvas> 而不是 <div>。我只得到带有图像的纯背景。我需要知道到底发生了什么？否则我在做什么样的错误？

【问题讨论】：

不知道是不是只有我一个人，但是描述比较混乱。 “如果我在同一个地方使用画布，它就来了。” ...什么？
@devnull69，谢谢你。我现在编辑它..
你说你用<canvas>替换了<div>。你是在说<div>的每一次出现吗？您不应该替换外部 div id="background"，因为画布不能成为更多画布元素的容器。 div class="clear" 也应该是一个 div (jsbin.com/oxokad)
@devnull69：好的，谢谢你......“画布不能成为更多画布元素的容器”这就是答案。

标签： jquery html canvas

【解决方案1】：

您的单元格可以是画布，但您的最外层元素必须是一个 div。

<canvas> 标签内的所有 HTML 仅在浏览器不支持画布时才会显示。这通常称为“后备内容”。因此，画布当然可以在每个单元格中，但不能在外部表中！

【讨论】：