canvas drawImage順序?qū)蛹墕栴}

    var canvas = document.getElementById('poster');
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    console.log(windowWidth, windowHeight)
    canvas.width = windowWidth * 0.76;
    canvas.height = canvas.width * 1.6;
    canvas.style.marginLeft = windowWidth * 0.12 + 'px';
    canvas.style.marginTop = windowHeight * 0.07 + 'px';

    var ctx = canvas.getContext('2d');
    var ratio = getPixelRatio(ctx);
//    {width,x,y}
    var postionArr = [
        {width: 0.86, x: 0.07, y: 0},
        {width: 0.88, x: 0.06, y: 0.33},
        {width: 0.76, x: 0.12, y: 0.335},
        {width: 0.72, x: 0.14, y: 0.34},
        {width: 0.6, x: 0.02, y: 1.2},
        {width: 0.2, x: 0.68, y: 1.21}];
    $('.poster-p').each(function (index, item) {
        var img = new Image();
        img.src = $(item).attr('src');
        img.onload = function () {
            ctx.drawImage(img, $('#poster').width() * postionArr[index].x * ratio, $('#poster').width() * postionArr[index].y * ratio, $('#poster').width() * postionArr[index].width * ratio, $('#poster').width() * postionArr[index].width * ($(item).height() / $(item).width()) * ratio);
        };
    });

現(xiàn)在這個順序正常繪制層級應(yīng)該是對的應(yīng)該是加載完成順序不同
所以文件比較大的最后繪制在最上面了沒有按照循環(huán)的順序

請問應(yīng)該怎么控制呢

換成小一些的圖片能正常順序的繪制了

回答

編輯回答

純妹

首先，canvas渲染圖片要等到圖片加載完才會觸發(fā)，所以你無法控制每一個圖片加載完成的先后順序。建議：將所有的圖片資源放在一個圖片預(yù)加載數(shù)組中，在draw之前先將所有的圖片資源加載完成。（可參考：https://github.com/PengJiyuan...）
可以對要渲染的資源數(shù)組設(shè)置index。在渲染之前Array.sort，可以控制渲染的先后順序。（同上，可參考：https://github.com/PengJiyuan...）

2017年12月3日 06:18

編輯回答

寫榮

寫在回答里吧。

你寫的循環(huán)體里，只做了三個事，新建、加載、注冊回調(diào)。而注冊回調(diào)并不會阻塞下一循環(huán)的發(fā)生，所以在加載時間有長有短的前提下，自然就是按大小來決定先后次序咯。
所以我為什么說你可以在前邊加個預(yù)加載，就是因為要斷開“加載”和“drawImage”之間的依賴關(guān)系（因為你drawImage是寫在加載回調(diào)里的，所以實際上drawImage會依賴于加載）：先加載，然后按次序（去找個獨(dú)立的次序數(shù)據(jù)來）drawImage，就不會出現(xiàn)你的這個問題了。

2017年3月26日 07:09