带画布的javascript动态变量名

时间:2019-03-18 01:50:56

标签: javascript variables canvas dynamic

我看了其他显示将变量名称放入数组的示例。当我这样做时,函数中的循环会引发错误。

我正在尝试为画布加载图像,玩家的每次迭代都应生成具有不同变量(例如头盔,武器手套等)的相同图像格式。

我要使之动态的变量是pic,我尝试在第一个var pic = [];循环上方使用for,然后再对我使用过的pic[i] = new Image(); pic[i].src = ...进行每次调用……
在第三个for循环

中使用变量时出现错误
for(var iii = 0, pic[i]; pic[i] = pics[iii++];) {
   ctx.drawImage(pic, 60, 270);

在第三个pic[i]调用中的第一个for上出错了

Uncaught SyntaxError: Unexpected token [

这是代码

        // For every player run iteration
        var pic = [];
        for (var i = 0; i < item.length; ++i) {
            // Position for players on account screen
            if(i == 0){ var pos = "61px";}
            if(i == 1){ var pos = "168px";}
            if(i == 2){ var pos = "275px";}

            // Gets player name from string
            var player = item[i].match( /([A-Z])\w+/g );

            // Create player div for mouse interaction
            var player_el = $('<div class="cursor player" id="player'+ player +'"></div>');
            $("#can_wrapper").append(player_el);
            $("#player"+ player).css({"position": "absolute", "height": "50px", "width": "50px", "left": ""+ pos +"", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab"});

            // Get player name for hover action
            var player_name_el = player;
            document.styleSheets[0].addRule('#player'+ player +':hover::after','content: "'+player_name_el+'";');

            // Player image URLs
            var urls = ['v1456.png', 'vbody0.png','vhead14.png','v1960.png','v578.png','v1221.png', 'v3063.png']; // url and order
            var pics = [];                            // holds the image elements                 
            var count = urls.length;                  // number of images to load

            // For every image run iteration
            for(var ii = 0, url; url = urls[ii++];) {   // share onload handler
                pic[i] = new Image();                // create a new image
                pics.push(pic);                       // store in array
                pic[i].onload = loadCounter;             // set load handler (also add for error)
                pic[i].src = 'https://www.example.com/interface/images/body/' + url; // set url to start loading
            }

            // Load images in the order they were called
            function loadCounter() {
                count--;
                if (!count) {                         // when done we can draw the images in order:
                    for(var iii = 0, pic[i]; pic[i] = pics[iii++];) {
                        ctx.drawImage(pic[i], 60, 270);
                    }
                }
            };

        }

0 个答案:

没有答案