Нужны пояснения по поводу нижнего холста

Question

Я пытаюсь разработать приложение для iphone, используя Html5 + jquery, поэтому я выбираю имя фреймворка в качестве jquery mobile. Более того, я новичок в HTML5 и JQuery. Хорошо, теперь моя проблема, у меня есть холст атрибута с фоном идентификатора, на этом холсте мне нужно сделать 4 коробки (ячейки), как это.

ящики такого типа появляются, когда я использую атрибут <div>, если я использую <canvas> вместо <div> в HTML, ящики не появляются. с какой проблемой я сталкиваюсь здесь?

мой 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

Ваши клетки могут быть холстами, но ваш самый внешний элемент должен быть делителем.

Весь HTML внутри тега <canvas> отображается только в том случае, если браузер не поддерживает холст. Обычно это называется «запасной контент». Таким образом, холст может быть в каждой из ячеек, но не во внешнем столе!