Wenn Sie während der Entwicklung mehrere Bilder gleichzeitig mit Canvas zeichnen müssen, die Größe der Bilder jedoch unterschiedlich ist, wird das Bild am Anfang des Arrays möglicherweise nicht zuerst geladen und dann gezeichnet, was zu einer Reihenfolge führen kann Die Reihenfolge der gezeichneten Bilder unterscheidet sich von dem, was ich erwartet habe (insbesondere, weil dies bei Bildern mit domänenübergreifender Umleitung besonders offensichtlich ist. Meine Lösung besteht darin, sie alle zuerst zu zeichnen, zu sortieren und dann anzuhängen). die erforderlichen Knoten.
<div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];letempfangenArray = new Array();let $myContent = document.getELmentById(myContent);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('load', () => { ctx.drawImage(img, 0, 0, imgW * ScaleBy, imgH * ScaleBy); let imgCont = new Image(); imgCont.id = 'img' + idx; // Das img, das wird Die zu zeichnenden Knoten werden in einem Array zusammengefasst. Die Reihenfolge hier kann von der Reihenfolge von imgArray abweichen, wenn (receiveArray.length === imgArray.length) { //Alle Bilder werden geladen und gezeichnet let sortArr = new Array(); takeArray.forEach(ex => { //Alle gezeichneten Bilder in der imgArray-Reihenfolge sortieren sortArr[ex.id.split('img')[1]] = ex; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})Tatsächlich ist dies auch ein etwas hilfloser Ansatz, da es unmöglich ist, die tatsächliche Größe der geladenen Bilder zu bestimmen. Wenn der Domainname umgeleitet wird, wird dies verstärkt Die Sortiermethode nach dem Zeichnen wird übernommen. Wenn jemand einen besseren Weg findet, korrigieren und kritisieren Sie ihn bitte.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.