神奇的canvas——绘制多图

干货满满

点击查看代码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 定义一个函数，用于加载图像
const loadImage = src => new Promise((resolve, reject) => {
  const img = new Image();
  img.onload = () => resolve(img);
  img.onerror = reject;
  img.src = src;
});

// 定义一个async函数，用于加载和绘制多个图像
const drawImages = async() => {
  // 使用Array.map()方法加载多个图像
  const images = await Promise.all([
    'image1.png',
    'image2.png'
  ].map(loadImage));

  // 将所有图像都添加到canvas上
  images.forEach((img, i) => ctx.drawImage(img, i * 100, 0));
};

// 调用async函数，开始加载和绘制多个图像
drawImages();