需要解释下面的画布

Question

我正在尝试使用Html5 + jquery开发iphone应用程序，所以我选择一个框架名称作为jquery mobile。更多的是Html5和jquery的新手。好吧，现在我的问题是，我有一个带背景的属性画布，在画布上我需要制作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>。我只得到图像的简单背景。我需要知道发生了什么？否则我在做什么样的错误？

Answer 1

你的细胞可以是画布，但你最外面的元素必须是一个div。

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