如何分隔每个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(); 
};