キャンバスを使用していくつかの画像のアニメーションを作成していますが、後で使用するために元の幅と高さを保存する必要があります(均等にスケーリングするなど)
しかし、テストを行うと (最後のアラートは 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>