如何在HTML canvas中循环绘制图片？点击All按钮仅显示最后一张图是什么原因

核心问题原因 #

这是JavaScript中异步回调+var变量作用域的经典问题：

1. 你在allImages的循环里用var声明canvas、context、imageObj这些变量，var没有块级作用域，变量会被提升到函数作用域，整个循环过程中其实复用的是同一个变量内存地址。另外循环的index没有加声明关键字，默认成为全局变量，也加剧了变量覆盖的问题。
2. imageObj.onload是异步回调，会等到图片资源加载完成后才执行，而for循环是同步执行的，等第一张图片开始触发onload的时候，for循环早就已经跑完5次了，此时所有回调里引用的context和imageObj都指向最后一次循环赋值的内容，所以5张图最后都画到了最后一个canvas上，看起来就只剩最后一张。

而nextImage每次点击只会执行一次，不存在循环变量覆盖的问题，所以运行正常。

解决方法 #

方案1：用let替代var（最简单，ES6+环境支持） #

把循环里所有变量声明换成let，let支持块级作用域，每次循环迭代都会生成独立的变量副本，每个onload回调都能拿到对应循环批次的变量：

function allImages() {
    // index也用let声明
    for (let index = 0; index < 5; index++) {
        let canvas = document.getElementById('display-'+index.toString());
        let context = canvas.getContext('2d');
        let imageObj = new Image();

        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0);
        };
        imageObj.src = 'image_'+index.toString()+'.png';
    }
}

方案2：用立即执行函数(IIFE)封装作用域（兼容ES5旧环境） #

每次循环用IIFE把当前的index传进去，生成独立的函数作用域保存变量，避免后续循环覆盖：

function allImages() {
    for (var index = 0; index < 5; index++) {
        // 把当前index作为参数传入立即执行函数
        (function(i) {
            var canvas = document.getElementById('display-'+i.toString());
            var context = canvas.getContext('2d');
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj, 0, 0);
            };
            imageObj.src = 'image_'+i.toString()+'.png';
        })(index)
    }
}

内容的提问来源于stack exchange，提问作者Psionman