如何在for循环中创建唯一的canvas元素

时间:2013-01-06 13:30:48

标签: javascript jquery html5 canvas

编辑:问题出现在我的代码中,我没有用正确的索引查询数组。 对于任何寻找这个问题答案的人来说,Karthik Ar都是正确的。感谢所有评论!

我正在努力在for循环中创建一个独特的canvas元素数组。 似乎所有元素都是创建的第一个元素的副本。我这样说是因为我需要将这个画布存储在一个数组中,然后随时访问它们的上下文。

    var _ctxs = new Array();
    function createCells()
            {
                _w = window.innerWidth;
                _h = window.innerHeight;
                var side = 300;
                //set amount of steps
                var stepsW = Math.ceil(_w/side) + 1;
                var stepsH = Math.ceil(_h/(side/2)) + 1;

                console.log("create cells");
                for (var i = 0; i < stepsH; i++) 
                {
                    var p = (i%2 == 0)?0:side/2;
                    for (var j = 0; j < stepsW; j++) 
                    {
                        var _tempCanvas = $('<canvas/>', {id: "i_" + i + "_" + j, width : side, height : side});
                        _tempCanvas.css({
                            'position' : 'absolute',
                            'top' : (i*(side/2)+1) - side/2,
                            'left' : (j*side + p) + 1 - side/2
                        });

                        //var _tempCtx = _tempCanvas[0].getContext('2d');
                        _ctxs.push(_tempCanvas[0]);

                        $('body').prepend(_tempCanvas);
                        k++;
                    };
                };
            }

任何自然?提前谢谢!

1 个答案:

答案 0 :(得分:0)

通过代码查看工作检查数组。

$(document).ready(jqueryready);
function jqueryready(){
for (var i = 0; i < 5; i++) 
            {
for (var j = 0; j < 5; j++) 
                {
                    var _tempCanvas = $('<canvas/>', {id: i+""+j, width : 10, height : 10});
                    console.log(_tempCanvas[0].id);
                    $('body').prepend(_tempCanvas);
                };
                }
}

这会为画布创建唯一的ID。