Durante el desarrollo, si necesita usar lienzo para dibujar varias imágenes al mismo tiempo, pero debido a que los tamaños de las imágenes son diferentes, es posible que la imagen al frente de la matriz no se cargue primero y luego se dibuje, lo que puede causar el orden. La forma en que se organizarán las imágenes dibujadas es diferente de lo que esperaba (especialmente porque es particularmente obvio para las imágenes con redirección de nombres de dominio agregadas entre dominios). Mi solución es dibujarlas todas primero, ordenarlas y luego agregarlas. los nodos requeridos.
<div id=miContenido></div>let imgArray = ['img1.png', 'img2.png'];let recibirArray = new Array();let $miContenido = document.getELmentById(miContenido);let {imgW, imgH} = {300, 300};let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let scaleBy = 2;Canvas.width = imgW * scaleBy;Canvas.height= imgH * scaleBy;imgArray.forEach((e, idx) => { let img = new Image(); img. src = e; e.addEventListener('cargar', () => { ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy); let imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; Los nodos se recopilan en una matriz. El orden aquí puede ser diferente del orden de imgArray if (receiveArray.length === imgArray.length) {. //Todas las imágenes se cargan y dibujan let sortArr = new Array();ceivedArray.forEach(ex => { //Ordena todas las imágenes dibujadas en orden imgArray sortArr[ex.id.split('img')[1]] = ex; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})De hecho, este también es un método algo inútil, porque es imposible determinar el tamaño real de las imágenes cargadas. Las imágenes pequeñas se cargarán y dibujarán primero. Si se redirige el nombre de dominio, este fenómeno se amplificará. Se adopta el método de clasificación después del dibujo. Si alguien piensa en una forma mejor, corríjala y critíquela.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.