Question

我的画布有问题。我可以用单个图像绘制画布，但我无法将每个画布与图像分开绘制。 - 如果数据只有一个图像，它工作正常，但数据有多个图像，它不起作用你能救我吗？

<script>
 var h_notepad = 500;
var w_notepad = 737;
var data = [
  {dataImageURL: "1_sat_1.png"},
  {dataImageURL: "1_sat_2.png"},
  {dataImageURL: "1_sat_3.png"},
  {dataImageURL: "1_sat_4.png"}
];
for(var i = 0; i < data.length ; i++){

  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();

  canvas.width = w_notepad;
  canvas.height = h_notepad;


  img.crossOrigin = 'anonymous';
  img.width = w_notepad;
  img.height = h_notepad;

  console.log(img);
  img.onload = function(){
    ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
  };
  img.src = data[i].dataImageURL;

  $('body').append(canvas);	
}
</script>

<html>
<head>
<meta charset="utf-8">
<title>DRAWING</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta charset="utf-8">

</head>
<body>
	

</body>
</html>

Answer 1

问题是onload是异步的。因此，在调用任何onload函数之前，所有代码都会运行。这就是你的功能

img.onload = function(){
  ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
};

使用最新的ctx并在此上下文中呈现所有图片。

您可以做的是使用同步函数范围覆盖此异步调用：

(function(ctx, img, w_notepad, h_notepad) {
  img.onload = function(){
    ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
  };
})(ctx, img, w_notepad, h_notepad);

这会隔离变量并保留值，直到您收到图像为止。

Answer 2

我猜你只得到最后一个。这是一个封闭问题。

当load事件触发时，img和ctx仅引用最后创建的事件。

所以你在同一个画布上绘制data.length时间。

为避免这种情况，您可以使用this并将画布创建包装在onload处理程序中：

var imgs = ['http://lorempixel.com/200/300/', 'http://lorempixel.com/500/300/', 'http://lorempixel.com/200/100/'];

for (var i = 0; i < imgs.length; i++) {

  var img = new Image();
  var width = 500;
  var height = 300;

  img.onload = function() {
    var c = document.createElement('canvas');
    c.width = width;
    c.height = height;
    document.body.appendChild(c);
    var ctx = c.getContext('2d');
    ctx.drawImage(this, 0,0, width, height);
  };

  img.src = imgs[i];

}

HTML画布图像 - 在页面中绘制多画布图像

2 个答案: