Selama pengembangan, jika Anda perlu menggunakan kanvas untuk menggambar beberapa gambar sekaligus, namun karena ukuran gambar berbeda, gambar di depan larik mungkin tidak dimuat terlebih dahulu lalu digambar, sehingga dapat menyebabkan keteraturan dari gambar yang digambar untuk disusun. Ini berbeda dari yang saya harapkan (terutama karena sangat jelas untuk gambar dengan pengalihan nama domain yang ditambahkan di seluruh domain). Solusi saya adalah menggambar semuanya terlebih dahulu, mengurutkannya, lalu menambahkannya ke node yang diperlukan.
<div id=myContent></div>biarkan imgArray = ['img1.png', 'img2.png'];biarkan receiverArray = new Array();biarkan $myContent = document.getELmentById(myContent);biarkan {imgW, imgH} = {300, 300};biarkan Canvas = document.createElement('canvas');biarkan ctx = Canvas.getContext(2d);biarkan scaleBy = 2;Canvas.width = imgW * scaleBy;Canvas.height= imgH * scaleBy;imgArray.forEach((e, idx) => { biarkan img = Gambar baru(); img. src = e; e.addEventListener('memuat', () => { ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy); let imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; ditarik Node dikumpulkan ke dalam array. Urutan di sini mungkin berbeda dari urutan imgArray if (receiveArray.length === imgArray.length) { //Semua gambar dimuat dan digambar let sortArr = new Array(); receiverArray.forEach(ex => { //Urutkan semua gambar yang digambar dalam urutan imgArray sortArr[ex.id.split('img')[1]] = misal; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})Faktanya, ini juga merupakan pendekatan yang tidak berdaya, karena tidak mungkin untuk menentukan ukuran sebenarnya dari gambar yang dimuat. Gambar kecil akan dimuat dan digambar terlebih dahulu. Jika nama domain dialihkan, fenomena ini akan diperkuat metode penyortiran setelah gambar diadopsi. Jika ada yang memikirkan cara yang lebih baik, mohon koreksi dan kritiknya.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.