Pendant le développement, si vous devez utiliser Canvas pour dessiner plusieurs images en même temps, mais comme les tailles des images sont différentes, l'image à l'avant du tableau risque de ne pas être chargée en premier puis dessinée, ce qui peut entraîner une commande. des images dessinées à organiser. C'est différent de ce à quoi je m'attendais (surtout parce que c'est particulièrement évident pour les images avec une redirection de nom de domaine ajoutée entre domaines). Ma solution est de toutes les dessiner d'abord, de les trier, puis de les ajouter. les nœuds requis.
<div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];let containArray = new Array();let $myContent = document.getELmentById(myContent);let {imgW, imgH} = {300, 300}; laissez Canvas = document.createElement ('canvas'); laissez 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('load', () => { ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy); let imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; être dessiné Les nœuds sont collectés dans un tableau. L'ordre ici peut être différent de l'ordre de imgArray if (receiveArray.length === imgArray.length) { //Toutes les images sont chargées et dessinées let sortArr = new Array(); ex; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})En fait, c'est aussi une approche quelque peu impuissante, car il est impossible de déterminer la taille réelle des images chargées. Les petites images seront chargées et dessinées en premier. Si le nom de domaine est redirigé, ce phénomène sera donc amplifié. la méthode de tri après tirage est adoptée. Si quelqu'un pense à une meilleure façon, veuillez la corriger et la critiquer.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.