我不能在对象中使用对象作为drawImage（）吗？ [英] Can I not use an object in an object for drawImage()?

问题描述

我似乎无法弄清楚为什么我的代码不起作用。我本质上想做的是使用数组生成基于10x10瓦片的地图。

I can't seem to figure out why my code doesn't work. What I'm essentially trying to do is generate a 10x10 tile based map using arrays.

该想法是创建一个名为Box的对象，该对象具有 x和 y轴属性，并且在该框中还包含一个图像对象。然后，在2d数组中的每个位置填充一个box对象。

The idea is to create an object called Box with an 'x' and 'y' axis property and also an image object within the box. Then, each position in the 2d array is populated with a box object.

然后我想在画布上绘制所有这些数组。每个图块（或数组元素）是一个64x64的框。

I then want to draw all these arrays out on a canvas. Each tile(or array element) is a 64x64 box.

const ROW = 10;
const COLS = 11;
const SIZE = 64;

var canvas = document.getElementById("canvas");
var surface = canvas.getContext("2d");

//creating tile
function box() {
    this.xaxis = 56;
    this.yaxis = 0;
    this.img = new Image();
    this.img.src = "box_image.png";
}

//creating map
var map =[];

function setMap() {
    for (var i = 0; i < ROW; i++) {
        for (var o = 0; o < COLS; o++) {
            map[i][o] = new box();
        }
    }
}

//rendering map
function render() {
    for (var i = 0; i < map.length; i++) {
        for (var x = 0; x < map.length; x++) {
            var tile = map[i][x];
            tile.xaxis *= i;
            tile.yaxis *= x;

            surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64);

        }
    }
}


setTimeout(render, 10);

推荐答案

添加一些您忘记的元素，这就是我的做法

Adding a few elements you forgot, here's how I would do it.

小提琴

HTML

   <canvas id="canvas" width="1000" height="1000"></canvas>
    <!-- set canvas size -->

JS

 const ROW = 10;
    const COLS = 11;
    const SIZE = 64;

    var canvas = document.getElementById("canvas");
    var surface = canvas.getContext("2d");

    //creating tile
    function box() {
        this.xaxis = 56;
        this.yaxis = 0;
        this.src = "https://cdn4.iconfinder.com/data/icons/video-game-adicts/1024/videogame_icons-01-128.png";   //save path to image
    }

    //creating map
    var map =[];

    function setMap() {
        for (var i = 0; i < ROW; i++) {
            var arr = [];    //make new row
            map.push(arr);   //push new row
            for (var o = 0; o < COLS; o++) {
                map[i].push(new box());    //make and push new column element in current row

            }
        }
    }

    //rendering map
    function render() {
        for (var i = 0; i < ROW; i++) {            //For each row

            for (var x = 0; x < COLS; x++) {       //And each column in it
                var tile = map[i][x]; 
                    tile.xaxis *= i;
                    tile.yaxis += (x*SIZE);   //increment y value

                var img = new Image();
                img.onload = (function(x,y) {    //draw when image is loaded
                     return function() {
                        surface.drawImage(this, x, y, 64, 64);
                        }

                })(tile.xaxis, tile.yaxis);

                img.src = tile.src;
            }
        }
    }

    setMap();    //create the grid
    render();    //render the grid

这篇关于我不能在对象中使用对象作为drawImage（）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！