Question

我正在制作动画头像。

我首先从一些XML中提取化身的框架细节。

我需要单独触发帧，以便我可以为化身设置动画，但帧存储的数组最终在我需要的地方为空。

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

findImages();

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function findImages() {
    var sources = {};

    $.ajax({
        type: 'GET',
        url: 'image_loader.php?avatar=jess',
        dataType: 'xml',
        success: function(xml) {
            $(xml).find('frame').each(function() {
                var name = $(this).find("name").text().toString();
                var url = $(this).find("url").text().toString();
                sources[name] = url;
            });

            loadImages(sources, function(images) {
                context.drawImage(images.v1, 0, 0);
            });
        }
    });
}

console.log(images);
context.drawImage(images.v5, 0, 0);

这是我的代码。如果你看一下'findImages＆＃39;功能你会看到它调用＆＃39; loadImages＆＃39;它将图像名称（密钥）和网址加载到＆＃39;图像中。阵列。

加载后，此部分会正确显示头像的起始图像：

context.drawImage(images.v1, 0, 0);

一切都很好。但是当我尝试访问“图像”时这样的函数之外的数组（如上面的代码所示）：

console.log(images);
context.drawImage(images.v5, 0, 0);

控制台报告一个空对象，我收到错误：

未捕获的TypeError：无法执行＆＃39; drawImage＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）＆＃39;

我认为这可能是范围问题？

Javascript中关联数组的范围

0 个答案: