canvas画图片

基础用法

<canvas id="myCanvas"
                  width="1456px"
                  height="100%"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = this.serverImage;
image.onload = function () {
  ctx.drawImage(image, 0, 0, 44, 44); // 图片对象, x位置, y位置, 宽度, 高度
};

封装

drawImage(url, x, y) {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = url;
  image.onload = function () {
    ctx.drawImage(image, x, y, 44, 44); // 图片对象, x位置, y位置, 宽度, 高度
  };
}

this.drawImage(this.serverImage, 0, 0)

循环调用

let serverData = [1, 2, 3, 4]

for (let i = 0; i < serverData.length; i++) {
  this.drawImage(this.serverImage, 100 * i, 0)
}