1

HTML5 Canvas（）に例があります<canvas id="canvas" width="640" height="480"></canvas>。JavaScriptコード（JSFiddleリンク）は次のとおりです。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var table = new Image();
table.src = 'http://s1.postimage.org/188qzfays/table.png';

var image1 = new Image();
var image2 = new Image();
image1.src = 'http://s4.postimage.org/1fxt9xtyc/floor_standard.png';
image2.src = 'http://s2.postimage.org/1a4erdun8/floor_standard2.png';

var objImage = new Image();
objImage.src = 'http://s4.postimage.org/1fxzw37xg/tree.png';

var tileArray = [image1, image2];
var objArray = [objImage];

var tileW = 16;
var tileH = 16;

var map = [
    [1, 0, 0, 0, 0],
    [0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0],
    [0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0]
];
var objMap = [
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0]
];


for(var i = 0; i < map.length; i++) {
    for(var j = 0; j < map[i].length; j++) {
        var drawTile = map[i][j];
        var objTile = objMap[i][j];
        var xpos = (i-j) * tileH + 100;
        var ypos = (i+j) * tileH / 2 + 100;
        context.drawImage(tileArray[drawTile], xpos, ypos);
        if(objMap) {
            context.drawImage(objArray[objTile], xpos, ypos - 32);
        }
    }
}

この例では、アイソメタイルとアイソメオブジェクトをレンダリングできますが、オブジェクトを描画できるのは1つのタイルのみです（たとえば、4つのタイルでオブジェクトを描画することはできません）。複数のタイルにアイソメオブジェクトを描画するにはどうすればよいですか？このオブジェクトのようなもの（私のコードでは、tableという名前の変数に格納されています）：

table.png

4

2 に答える 2

1

うーん、これは私にとってはうまくいくようです。

ツリーの代わりにテーブルを描画するようにコードを少し変更しましたが、これはhttp://jsfiddle.net/9ZH4h/2/で機能しています。出力 (chrome と ff の下) に次のように表示されます。

出力

それはあなたが望んでいた出力ですか？

于 2011-08-30T16:12:05.803 に答える
0

単一のアイソタイルよりも大きい画像は、そのオフセットを計算する必要があります。これには、収まるまでいじる必要がある実際の式はありません...それを識別するための ID を持つ配列に格納します。

次に、テーブルが描画されるたびに、配列からオフセットを取得し、それを描画する前に最終位置に追加します。

于 2012-03-21T02:33:15.390 に答える