開発中に、キャンバスを使用して複数の画像を同時に描画する必要がある場合、画像のサイズが異なるため、配列の先頭にある画像が最初にロードされてから描画されず、順序がずれる可能性があります。描画された画像が配置されるのは、私が期待していたものとは異なります (特に、ドメイン間でドメイン名リダイレクトが追加された画像の場合は特に顕著です)。私の解決策は、最初にそれらをすべて描画し、並べ替えてから追加することです。必要なノード。
<div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];let acceptArray = new Array();let $myContent = document.getELmentById(myContent);let {imgW, imgH} = {300, 300};let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);letscaleBy = 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); imgCont = new Image(); imgCont.id = 'img' + idx(imgCont);ここでの順序は imgArray if (receiveArray.length === imgArray.length) { の順序と異なる場合があります。 //すべての画像がロードされ、描画されます let sortArr = new Array(); acceptArray.forEach(ex => { //描画されたすべての画像を imgArray 順にソートします sortArr[ex.id.split('img')[1]] =例; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})実際、これはロードされたイメージの実際のサイズを決定することができないため、ドメイン名がリダイレクトされると、この現象がさらに増幅されます。描画後に仕分けする方法を採用しています。誰かがより良い方法を考えたら、修正して批判してください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。