Javascript 在画布上扭曲图像并设置其动画

我想在画布上扭曲图像并设置动画。我可以在画布上绘制图像，但如何在绘制后倾斜并设置动画？如何获取绘制在画布上的图像的引用

我可以像这样在画布上画画

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

---

下面是一个非常粗略的草图，让您开始：

$(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);
});

$（函数（）{
变量
已加载=错误，
ctx=$（'canvas'）[0]。getContext（'2d'），
img；
img=$（'1）{
f=0；
}
}
};
}(), 16);
});

---

演示：

画布上没有“获取参考”这样的东西。画布只是像素，你想要处理的每一个离散对象都必须由你在画布上绘制的代码来处理。我必须重画所有东西来制作动画？正确。对于动画，您必须了解每一点信息并在每一帧上重新绘制。