在開發(fā)中,如果遇到需要使用canvas同時(shí)繪制多張圖片,但因?yàn)閳D片大小的不一樣,排在數(shù)組前面的圖片不一定能先被load然后繪制,就可能會(huì)導(dǎo)致畫出來的圖的排列順序和預(yù)想的不一樣(特別是因?yàn)榭缬蚣恿擞蛎囟ㄏ虻膱D片尤為明顯),我的解決辦法是:先全部畫出來再排序再append到需要的節(jié)點(diǎn)里去。
<div id="myContent"></div> let imgArray = ['img1.png', 'img2.png']; let receiveArray = 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.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; receiveArray.push(imgCont); // 將繪制的img節(jié)點(diǎn)收集到數(shù)組里,這里的順序可能和imgArray的順序不一樣 if (receiveArray.length === imgArray.length) { //所有圖片load并繪制完成 let sortArr = new Array(); receiveArray.forEach(ex => { //將所有繪制圖片按imgArray順序排序 sortArr[ex.id.split('img')[1]] = ex; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } }) })
其實(shí)這也是一種略顯無奈的做法,因?yàn)闊o法判斷加載圖片的實(shí)際大小,小的圖片會(huì)先load并繪制,如果重定向域名后會(huì)加大這種現(xiàn)象,采用了繪制完再排序的做法。如果有誰想到更好的辦法,歡迎指正批評(píng)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:赤峰 聊城 阿壩 盤錦 金昌 中山 綏化 萍鄉(xiāng)
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解canvas繪制多張圖的排列順序問題》,本文關(guān)鍵詞 詳解,canvas,繪制,多張,圖,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。