如何分隔每個HTML Canvas路徑/形狀以單獨填充？

Question

我一直在練習使用JavaScript和畫布，我已經到了我正在渲染一個形狀或兩個和幾行來創建自定義形狀的問題。現在我需要能夠單獨爲每個單獨着色，但是當我使用新的Image（）;其中第一個形狀是指該紋理在繪製的最後一個ctx形狀上呈現。

這裏是我的代碼：

https://jsfiddle.net/3dk4447k/2/

renderCanvas: function(topLength, heightLength, slant) { 
var canvases = Array.from(document.getElementsByClassName("DesignerCanvas")); 

for (var canvas of canvases) { 

    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    ctx.strokeStyle = '#000'; 
    ctx.lineWidth = 0.5; 

    // String for Hanging 
    ctx.beginPath(); 
    ctx.rect(150, 0, 3, 75); 
    ctx.stroke(); 
    ctx.closePath(); 

    // Top Trimming 
    ctx.beginPath(); 
    ctx.moveTo((150 - (topLength/2)) , 80); 
    ctx.quadraticCurveTo(150 , 70, 150 + (topLength/2), 80); 
    ctx.lineTo(150 + (topLength/2), 83); 
    ctx.quadraticCurveTo(150 , 73, 150 - (topLength/2), 83); 
    ctx.closePath(); 
    ctx.stroke(); 

    // Shade Outter Body 
    ctx.beginPath(); 
    ctx.moveTo(150 + (topLength/2), 83); 
    ctx.quadraticCurveTo(150 , 73, 150 - (topLength/2), 83); 
    ctx.lineTo(150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength - 10), 150 + ((topLength/2) + slant), heightLength); 
    ctx.closePath(); 
    ctx.stroke(); 

    // Shade Inner Body 
    ctx.beginPath(); 
    ctx.moveTo(150 + ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength - 10), 150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength + 5), 150 + ((topLength/2) + slant), heightLength); 
    ctx.stroke(); 
    ctx.closePath(); 

    // Bottom Trimming 
    ctx.beginPath(); 
    ctx.moveTo(150 + ((topLength/2) + slant), (heightLength - 3)); 
    ctx.quadraticCurveTo(150 , (heightLength - 15), 150 - ((topLength/2) + slant), (heightLength - 3)); 
    ctx.lineTo(150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength + 5), 150 + ((topLength/2) + slant), heightLength); 
    ctx.closePath(); 
    ctx.stroke(); 

} 
}, 

init: function() { 
console.log("Product Designer: Initialized."); 
this.bindActions(); 
this.renderPage("DesignerTab1", "DesignerPanel1"); 
} 

} 

好澄清，我的最終結果應該基本相同，因爲它現在是怎樣，但與改變紋理背景的能力我所做過的所有路徑。例如第一個路徑字符串應該能夠填充圖像，下一個路徑頂部修剪應該能夠填充圖像等。

我的代碼中的問題是，當您將圖像放置到新圖像（ ），那麼紋理將呈現在整個形狀的底部，這不是我想要的，它應該只填充形狀的頂部。

Answer 1

圖像是異步加載的。圖像的onload函數在renderCanvas函數完成後啓動。當執行onload函數時，當前路徑將是renderCanvas函數中定義的最後一個路徑。要在所需路徑內繪製圖像，需要在onload函數內移動定義所需路徑的代碼。例如，更改...

// String for Hanging 
ctx.beginPath(); 
    ctx.rect(150, 0, 3, 75); 
    var img = new Image(); 
    img.src = 'image here'; 
    img.onload = function() { 
     var pattern = ctx.createPattern(this,"repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    }; 
ctx.closePath(); 

到...

// String for Hanging 
var img = new Image(); 
img.src = 'image here'; 
img.onload = function() { 
    ctx.beginPath(); 
     ctx.rect(150, 0, 3, 75); 
     var pattern = ctx.createPattern(this,"repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    ctx.closePath(); 
};