Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - HTML Canvas 图像 - 在页面中绘制多 Canvas 图像

In lại 作者：行者123 更新时间：2023-11-30 16:11:16 29 4
mua khóa gpt4 Nike

我对 Canvas 有疑问。我可以用单个图像绘制 Canvas ，但我不能用单独的图像绘制每个 Canvas 。- 如果数据只有一个图像，它工作正常，但数据有多个图像，它不工作你能帮帮我吗？


 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);	
}

<đầu>

DRAWING


1 Câu trả lời

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

khi load 事件触发时，hình ảnh Và ctx 仅引用最后创建的。

因此您在同一 Canvas 上绘制 data.length 时间。

为避免这种情况，您可以使用 cái này 并将 Canvas 创建包装在 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];

}

关于javascript - HTML Canvas 图像 - 在页面中绘制多 Canvas 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36218037/

29 4 0
Bài viết được đề xuất: javascript - 按钮上的页面滚动错误单击jQuery
Bài viết được đề xuất: c - 如何获取子进程的退出状态？
Bài viết được đề xuất: c - C 中 strcat() 的段错误
Bài viết được đề xuất: javascript - 如何使用 Angular.js 将下拉值设置为空白
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com