Javascript 使用画布更改图像的透视图

我需要用HTML5JavaScript改变画布上三幅图像的透视图。我想要三张图片靠在屏幕上。这是我的代码，到目前为止

 function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var sources = {
    front: 'img/slide1.png',
    lefty: 'img/slide2.png',
    righty: 'img/slide3.png',
    slideLogo: 'img/slideLogo.png'
  };

  loadImages(sources, function(images) {
    context.drawImage(images.righty, 610, 55, 300, 250);
    context.drawImage(images.lefty, 50, 55, 300, 250);
    context.drawImage(images.front, 305, 100, 350, 300);
    context.drawImage(images.slideLogo, 130, 300, 700, 206);
  });

我想要倾斜的图像是正面、左边和右边

---

谢谢

为我们制作一个JSFIDLE:）它是3个“常量”图像吗？因为画布是用于2D的，即使setTransform允许扭曲图像，也无法令人信服。因此，要么对图像进行预处理，要么对图像进行逐像素手动处理（使用getImageData），这会很慢，这并不重要，因为它只是在加载时进行的。提示：请参阅仿射变换或四边形变换（在本例中甚至是“模式7:-））。