javascript - 将 for 循环中的元素添加到 Canvas

<分区>

我有多个 Canvas 元素:

<canvas class="screen" width="250" height="250" data-json="{{json_encode($board)}}"></canvas>

在我的 javascript 中，我执行以下操作:

var canvas = document.getElementsByClassName('screen');
for (var i = 0; i < canvas.length; i++) {
    var podium = new Image();
    podium.canvas = canvas[i];
    podium.onload = function() {
        var coordinates = JSON.parse(podium.canvas.getAttribute('data-json');
        console.log(coordinates);
        //Later on I add more images or anything else based on coordinates.
    }
    podium.src = 'my_podium_image.jpg';

}

但是coordinates始终包含来自最后一个 <canvas> 的数据我的 HTML 中的元素。

但是如果我把 var coordinates = JSON.parse(podium.canvas.getAttribute('data-json');外面onload并打印输出，它打印每个 canvas 的 data-json 属性这是正确的，但在 load()功能它仍然只记录最后一个 Canvas 的数据属性。 (多次，因为 for 循环)

我不知道发生了什么。 :)

最佳答案

你的问题是关于 Javascript Clousure How do JavaScript closures work?

执行该函数时，podium 的值是最后分配的值。

您应该使用保持 podium 范围的自执行函数

var canvas = document.getElementsByClassName('screen');
for (var i = 0; i < canvas.length; i++) {
    (function(podium) {
        podium.canvas = canvas[i];
        podium.onload = function() {
            var coordinates = JSON.parse(podium.canvas.getAttribute('data-json'));
            console.log(coordinates);
            //Later on I add more images or anything else based on coordinates.
        }
        podium.src = 'my_podium_image.jpg';
    })(new Image())

}

关于javascript - 将 for 循环中的元素添加到 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41021926/

上一篇：javascript - 裁剪图像的最佳方式

下一篇：html - 当两个类有一些共同的样式时如何减少css？

相关文章：

Javascript 幻灯片卡住

javascript - 我正在使用 Brad Frost 的 3-up Carousel，我想添加一个圆形包装

javascript - 在ipad上用手指在html中画画？

android - Flutter Custompainter canvas drawimage 不工作

javascript - ng-repeat 中的动态 ng-model 未定义

javascript - 在 iOS 中将字符串传递给 JavaScript 无法获取调用的函数

javascript - Flutter WebView blob pdf 下载

javascript - 使用 AngularJS 动态更新 CSS 样式

html - 选项卡式分页帮助

javascript - 从特定来源缩放 Canvas