Javascript Can'；t在循环中绘制画布上下文

我试图生成多个画布，并在循环中绘制它们

当我执行代码时，所有画布都会正确生成，但只有最后一个画布上有矩形

for(var i = 0; i < canvasNumber; i++) {
    $(".canvas-container")[0].innerHTML += `<canvas class="canva${i}"></canvas>`;
    $(`.canva${i}`)[0].width = window.innerWidth/5;
    $(`.canva${i}`)[0].height = window.innerHeight/5;
    let cc = $(`.canva${i}`)[0].getContext("2d");
    cc.fillRect(30*i,20,200,100);
}

for（变量i=0；i

---

如@prog1011中所述：

下面的DOM元素属性可能会导致浏览器执行回流 操作

• innerHTML
• 抵销父母
• 风格
• 卷轴

innerHTML

仅在设置更改时触发回流 多姆

innerHTML

更改对象的HTML，这肯定会影响 尺寸和位置，并将至少触发部分回流

因此，不要使用

innerHTML

而是使用

append

，如下所示：

const canvasNumber=4；
常量宽度=window.innerWidth/5；
const height=window.innerHeight/5；
对于（变量i=0；i

.canvas{
边框：1px纯红；
}

---

这是否回答了您的问题？“回流”与这里的事情无关。回流，也称为“recalc”，是指浏览器重新计算页面中所有元素的位置，因为其中一个元素确实移动了，但这不会改变任何内容。