jquery-plugins - Html5 Canvas 问题，图像尺寸错误

Question

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

我的目标是构建一个 Canvas 游戏作为 jQuery 插件。我想显示一个由 javascript 动态创建的带有岛屿的网格(就像网络浏览器征服类型的游戏一样)。所以我想创建一个 100% 宽度(和高度)的 Canvas ，其中 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 );
                }
            }

Canvas 的 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

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

Answer 1

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

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

最重要的是，始终向 Canvas 元素添加宽度和高度属性。