0

我使用画布创建一些图像的动画，但我需要存储原始宽度和高度以供以后使用（比如均匀缩放它们）

但是进行测试（最后一个警报显示未定义）似乎 .data 不起作用有人可以告诉我我做错了什么吗？

查询：

$(document).ready(function(){
    // Creacion de imagenes animadas y sonidos
    var gun = $("#gun")[0];
    var alarm = $("#alarm")[0];

    $('canvas.animado').each(function(index, element){
        var obj = $(this);
        var canvas = $(this)[0];
        var context = element.getContext('2d');

        var img = new Image();
        img.src = $(this).data('url');
        img.onload = function () {
            canvas.width = img.width / 2;
            canvas.height = img.height;
            context.drawImage(img, 0, 0);
            obj.data('width', 'prueba');
        };

        $(this).on({
            "mouseover" : function() {
                $(this).css('opacity', '0.3');
                canvas.width = canvas.width;
                context.drawImage(img, img.width / 2,0,img.width / 2,img.height,0,0,img.width / 2,img.height);
                $(this).fadeTo('slow', 1);
            gun.play();
        },
             "mouseout" : function() {
                $(this).css('opacity', '0.5');
                canvas.width = canvas.width;
                context.drawImage(img, 0, 0);
                $(this).fadeTo('slow', 1);
            }
        });
    });

    // Correccion de heroes
    alert($('#teniente').data('width'));

});

HTML：

<ul id="heroes">
    <li class="pedestal">
        <canvas id="aguila" class="animado img-responsive" data-url="images/sh_aguila.png"></canvas>
    </li>
    <li class="pedestal">
        <canvas id="justice" class="animado img-responsive" data-url="images/sh_justice.png"></canvas>
    </li>
    <li class="pedestal">
        <canvas id="teniente" class="animado img-responsive" data-url="images/sh_teniente.png"></canvas>
    </li>
    <li class="pedestal">
        <canvas id="ninja" class="animado img-responsive" data-url="images/sh_ninja.png"></canvas>          
    </li>
    <li class="pedestal">
        <canvas id="ghost" class="animado img-responsive" data-url="images/sh_gosth.png"></canvas>
    </li>
</ul>
4

2 回答 2

2

看起来不错...

这是因为each()回调中操作的异步性质。加载图像后设置宽度数据（img.onload = function(){...}） - 这是一个异步操作。

您在循环后不久就会调用警报，此时图像可能尚未加载，因此可能未执行加载回调 - 因此未设置宽度数据

于 2013-10-12T02:33:57.747 回答
1

你做错了什么...... - 你试图在设置之前访问宽度，img.onload 是async并且你的警报在你在 img onload 的回调中设置数据之前执行。

  img.onload = function () {
        canvas.width = img.width / 2;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        obj.data('width', 'prueba');
    };

因此，如果您想在加载图像后做某事，最好的方法是在 onload 的回调中调用它。

IE

      img.onload = function () {
        canvas.width = img.width / 2;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        obj.data('width', 'prueba');
        doMyWork();
    };

    function doMyWork(){
       //now i will do something with my width stored in data
    }
于 2013-10-12T02:34:26.613 回答