0

キャンバスを使用していくつかの画像のアニメーションを作成していますが、後で使用するために元の幅と高さを保存する必要があります(均等にスケーリングするなど)

しかし、テストを行うと (最後のアラートは undefined と表示されます)、.data が機能していないようです。

Jクエリ:

$(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