2

我正在尝试创建一个 10x10 图像的网格。这些是从 javascript（对象）加载的，并使用 onload 方法将其添加到画布。添加作品，但画布图像似乎已调整大小。顺便说一下，currentSizes.cellSize 的结果是 80。然而，似乎添加的图像大于定义的 80，即使 drawImage 参数宽度和高度获取值 80..

我的目标是将画布游戏构建为 jQuery 插件。我想显示一个带有岛屿的 javascript 动态创建的网格（就像网络浏览器征服类型的游戏一样）。所以我想创建一个 100% 宽度（和高度）的画布，其中 javascript 动态测量每个单元格（10x10）必须有多大。

所以我有以下内容：

                for( var i = 0 ; i < totalTiles ; i++ ) {

                // go to first column in next row
                if( x >= 10 ) {
                    x   = x - 10;
                    y   = y + 1;
                }


                // build the world
                tiles[i]    = new Image();
                tiles[i].x  = x;
                tiles[i].y  = y;
                tiles[i].towidth    = currentSizes.cellSize;
                tiles[i].toheight   = currentSizes.cellSize;
                tiles[i].coordx = ( x * currentSizes.cellSize );
                tiles[i].coordy = ( y * currentSizes.cellSize );
                //tiles[i].onload   = function() { canvas2d.drawImage( tiles[i] , 0 , 0 ); }
                //tiles[i].onLoad   = dibaMethods.drawTile( tiles[i] , ( x * currentSizes.cellSize ) , ( y * currentSizes.cellSize ) , canvas2d );
                tiles[i].src    = "/images/world/tiles/card5.png";

                lastIndex   = i;

                console.log( "looping at: " + i + " with x/y: " + x + "/" + y + " and coordinates: " + tiles[i].coordx + "/" + tiles[i].coordy );

                x++;
            }
            console.log( "Canvas tiles entered, loaded on DOM load, tiles added: " + tiles.length );
            tiles[lastIndex].onload     = function() {
                for( var i = 0; i < totalTiles ; i++ ) {
                    canvas2d.drawImage( tiles[i] , tiles[i].coordx , tiles[i].coordy );
                    //canvas2d.drawImage( tiles[i] , tiles[i].coordx , tiles[i].coordy , tiles[i].towidth , tiles[i].toheight );
                }
            }

画布的 HTML：

<canvas id="world">
</canvas>

样式表：

    body { margin: 0; }
    canvas#world { clear: both; background: url("/images/world/clouds.jpg") no-repeat; width: 800px; height: 800px; }

你可以看到我在网址上走了多远：https ://battles.hyn.me/world

非常感谢任何建议！如果问题需要详细说明，请发表评论！

4

1 回答 1

5

问题源于没有宽度或高度属性的画布元素。

在编辑 html 以包含这些属性并删除样式表条目后，它终于起作用了。

所以底线，总是给画布元素添加一个宽度和高度属性。

于 2013-01-04T09:46:29.817 回答