Möglich, auf mehreren Canvas von ClassName zu zeichnen?

Question

Aus dem folgenden Code übergebe ich Werte in meine Funktion mit denen sie meine spezifische Form zeichnen. Wenn ich jedoch versuche, Canvas nach ClassName zu erhalten, bricht mein Code ab und es steht .getContext() ist keine Funktion. Also hier versuche ich einen Weg zu finden. Mit meiner aktuellen Konfiguration glaube ich nicht, dass die Übergabe des eigentlichen Dokument-Canvas-Objekts möglich wäre.

function drawShape1(topWidth, shadeHeight) { 
    var canvas = document.getElementById('product-render-configurator'); 
    var paper = canvas.getContext('2d'); 

    paper.clearRect(0, 0, canvas.width, canvas.height); 

    // begin custom shape 
    paper.beginPath(); 
    //draw Shade String 
    paper.moveTo(150, 0); 
    paper.lineTo(150, 38); 
    //draw shadeTop 
    paper.moveTo((canvas.width/2) - topWidth, 40); 
    paper.quadraticCurveTo(150 , 35, (canvas.width/2) + topWidth, 40); 
    paper.lineTo((canvas.width/2) + topWidth, shadeHeight); 
    paper.quadraticCurveTo(canvas.width/2 , shadeHeight - 5, (canvas.width/2) - topWidth, shadeHeight); 
    paper.lineTo((canvas.width/2) - topWidth, 40); 
    paper.moveTo((canvas.width/2) - topWidth, shadeHeight); 
    paper.quadraticCurveTo(canvas.width/2 , shadeHeight + 5, (canvas.width/2) + topWidth, shadeHeight); 

    // complete custom shape 

    paper.lineWidth = 0.5; 
    paper.strokeStyle = 'black'; 
    paper.stroke(); 
} 

Answer 1

document.getElementsByClassName() gibt eine HTMLCollection (ein Array-ähnliches Objekt), so kann man nicht direkt .getContext() auf es nennen. Sie müssen seine Elemente überschleifen und rufen Sie .getContext() direkt auf jedem von ihnen:

function drawShape1(topWidth, shadeHeight) { 
    var canvases = Array.from(document.getElementsByClassName('class-name')); 
    for (let canvas of canvases) { 
    var paper = canvas.getContext('2d'); 

    paper.clearRect(0, 0, canvas.width, canvas.height); 

    // begin custom shape 
    paper.beginPath(); 
    //draw Shade String 
    paper.moveTo(150, 0); 
    paper.lineTo(150, 38); 
    //draw shadeTop 
    paper.moveTo((canvas.width/2) - topWidth, 40); 
    paper.quadraticCurveTo(150 , 35, (canvas.width/2) + topWidth, 40); 
    paper.lineTo((canvas.width/2) + topWidth, shadeHeight); 
    paper.quadraticCurveTo(canvas.width/2 , shadeHeight - 5, (canvas.width/2) - topWidth, shadeHeight); 
    paper.lineTo((canvas.width/2) - topWidth, 40); 
    paper.moveTo((canvas.width/2) - topWidth, shadeHeight); 
    paper.quadraticCurveTo(canvas.width/2 , shadeHeight + 5, (canvas.width/2) + topWidth, shadeHeight); 

    // complete custom shape 

    paper.lineWidth = 0.5; 
    paper.strokeStyle = 'black'; 
    paper.stroke(); 
    } 
}