2

10x10の画像のグリッドを作成しようとしています。これらはjavascript（オブジェクト）からロードされ、onloadメソッドを使用してcanvasに追加します。追加は機能しますが、キャンバス画像のサイズが変更されているようです。ちなみにcurrentSizes.cellSizeの結果は80です。ただし、drawImageパラメーターのwidthとheightの値が80であっても、追加された画像は定義された80よりも大きいようです。

私の目標は、jQueryプラグインとしてキャンバスゲームを構築することです。javascriptで動的に作成された島のあるグリッドを表示したい（Webブラウザーの征服タイプのゲームのように）。そこで、JavaScriptが各セル（10x10）の大きさを動的に測定する100％の幅（および高さ）のキャンバスを作成したいと思います。

だから私は次のことをしています：

                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; }

あなたは私がURLにどれだけ到達したかを見ることができます：https ：//battles.hyn.me/world

どんなアドバイスも大歓迎です！質問を詳しく説明する必要がある場合は、コメントしてください。

4

1 に答える 1

5

この問題は、幅または高さの属性を持たないキャンバス要素が原因でした。

これらの属性を含めるようにhtmlを編集し、スタイルシートのエントリを削除すると、最終的に機能しました。

つまり、常にキャンバス要素に幅と高さの属性を追加してください。

于 2013-01-04T09:46:29.817 に答える