1

私は、HTML5 Canvas などをもう少しよく知るための楽しみのために、小さなマップ エディターを開発しています。

私がしたいこと

私は3つのアイテムをロードしようとしています:

  • 2 岩
  • 1 ゴブリン

アイテムをキャンバスに描画する関数「drawItem(item)」を作成しました。

drawItem = function(item) {
    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(gridSize*item.position[0], gridSize*item.position[1], gridSize, gridSize);
        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = item.img;
};

item-object は次のようになります。

itemOne = {
    img : 'https://lh3.googleusercontent.com/ZX4Zl7JT1gkgOVA9FbMFnMAw7TC9bBCVMSGWKFTmOW88vDTgcCOb7tBBo60nxoSdHQ=s190',
    position : [0, 0] //these get multiplied with "gridSize" in the drawItem-function
};

ここに問題があります：

この関数を item-object で呼び出すと、オブジェクトが正しく描画されます。

この関数を 3 つの異なるアイテム オブジェクト (JS-Fiddle を参照) で 3 回呼び出すと、2 つのロック アイテムの上にゴブリンが乗っているように見えます。それは間違っている。

JS-フィドル

http://jsfiddle.net/rSVkb/1/

"質問"

誰もこの問題を知っていますか？私は何時間もグーグルで検索してきましたが、何を検索すればよいかよくわからないので、見つけるのはちょっと難しいです.

どうもありがとう！ボリス

4

3 に答える 3

2

を使用してプロセス全体を簡素化できますdrawImage

drawItem = function(item) {
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, gridSize*item.position[0], gridSize*item.position[1])
    };
    imageObj.src = item.img;
};

http://jsfiddle.net/rSVkb/2/

于 2013-08-02T17:00:16.983 に答える