キャンバスに画像を歪め、アニメーション化する

Question

キャンバス上で画像を歪ませてアニメーション化したい。私はキャンバスにイメージを描くことができますが、描画後にイメージを歪ませてアニメーションする方法はありますか？どのようにキャンバスに描かれている画像の参照を取得するには？

私はここでは、この

var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 

Answer 1

のようなキャンバスに画像を描画することができますが、あなたが始めるために非常にラフスケッチです：

$(function() { 
    var 
    loaded = false, 
    ctx = $('canvas')[0].getContext('2d'), 
    img; 

    img = $('<img>', { 
    src: 'http://www.gravatar.com/avatar/e25f40f6711403073e7da6c33be21eb8?s=128&d=identicon&r=PG' 
    }).on('load', function() { 
    loaded = true; 
    }).get(0); 


    setInterval(function() { 
    var f = 0; 

    return function() { 
     if (loaded) { 
     ctx.clearRect(0, 0, 500, 500); 

     ctx.save(); 
     ctx.setTransform (1, f, 0, 1, 0, 0); 
     ctx.drawImage(img, 50, 50); 
     ctx.restore(); 

     f += 0.01; 

     if (f > 1) { 
      f = 0; 
     } 
     } 
    }; 
    }(), 16); 
}); 

デモ：http://jsfiddle.net/UHSKL/