Canvas 多图绘制与指定图片翻转技巧

要在Canvas中绘制多个图片并实现指定图片翻转，您可以使用以下步骤：

创建一个Canvas元素，并获取其上下文对象：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

加载多个图片，并在加载完成后绘制到Canvas上：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var loadedCount = 0;

function loadImage(index) {
  var image = new Image();
  image.onload = function() {
    // 绘制图片到Canvas上
    context.drawImage(image, x, y, width, height);
    
    // 指定图片翻转
    if (index === 1) {
      context.scale(-1, 1); // 水平翻转图片
    } else if (index === 2) {
      context.scale(1, -1); // 垂直翻转图片
    }
    
    loadedCount++;
    if (loadedCount === images.length) {
      // 所有图片加载完成后执行其他操作
      // ...
    }
  }
  image.src = images[index];
}

for (var i = 0; i < images.length; i++) {
  loadImage(i);
}

上述代码中的x、y、width和height为绘制图片的位置和大小，您可以根据需要进行调整。

请注意，翻转操作context.scale会影响后续绘制的所有内容，如果只想翻转指定的图片，可以在绘制完成后使用context.setTransform(1, 0, 0, 1, 0, 0)重置变换矩阵。