1. 问题场景
使用canvas绘制进行要素叠加时，往往会出现不是按照先画的在下面，后画的在最上面这样的顺序进行叠加显示。原因就是由于图片大小不同导致绘制或加载的时间不一样，先加载完的先画，后加载完的后画。
假设现在想要在canvas同一个区域同时绘制如下四个要素：
1.矩形网格（600 × 600）
2.红色图片（400 × 400）
3.绿色图片（200 × 200）
4.蓝色线条
按顺序进行绘制，但是，最终绘制出来的效果如下图所示，并且想要绘制的绿色图形和蓝色线条被红色部分遮挡，即绘制时不是按想要的顺序进行绘制的。其中，网格部分被遮挡是因为绘制的时候先绘制了网格，所以也会被遮挡一部分。
那么，如何解决绘制时的顺序问题，使得图片不发生遮挡，按照自己想要的顺序进行绘制呢？
2. 解决思路
既然出现了上述问题，那必然是先执行了绘制蓝色线条和绿色图形的函数，最后再执行绘制红色部分的函数到canvas上，导致的遮挡。
那么是否可以控制函数的执行顺序？
于是想到了可以定义一个数组，把所有要执行的函数方法push到数组中，即把函数当做数组的元素存储在数组中，这样就可以通过数组的方法来操作这些函数，然后对函数按照自定义的顺序进行排序，需要先执行的放前面，后执行的放后面，最后遍历函数数组并执行其中的每个函数即可。
3. 实现代码
1.自定义绘制顺序。
const DrawIndex = { red: 1, green: 2, mesh: 3, line: 4, };
注：这里让网格第3个绘制是防止网格被遮挡。
2.定义drawList数组，保存所有需要绘制的函数
const drawList = [];
3.分别添加需要绘制的函数、相应参数列表以及需要绘制的顺序到数组中
//1.添加绘制网格函数 drawList.push({ func: this.drawMesh, //绘制网格函数 value: [width, height], //绘制需要的参数列表 index: DrawIndex.mesh, //绘制顺序 }); //2.添加绘制红色部分函数 drawList.push({ func: this.drawRed, value: [width, height, color], index: DrawIndex.red, //绘制顺序 }); //3.添加绘制绿色部分函数 drawList.push({ func: this.drawGreen, value: [width, height, color], index: DrawIndex.green, //绘制顺序 }); //4.添加绘制蓝色线条函数 drawList.push({ func: this.drawLine, value: [lineWidth, lineColor], index: DrawIndex.line, //绘制顺序 });
4.对数组进行排序
drawList.sort((a, b) => a.index - b.index);
5.遍历函数数组并执行其中的函数
drawList.forEach((draw) => { draw.func.apply(this, draw.value); });
最终效果
