Javascript, Responsive Design, Mehrere IDs

Question

Ich versuche, eine Webseite zu erstellen, die 3 Leinwand hat. Die Leinwand sollte ihre Größe entsprechend dem Bildschirm ändern. Meine Methode funktioniert nur für eine Leinwand (die ich die ID angeben). Ich benutze die getElementByID die nur eine benötigt. Jede Zeichenfläche hat ihre eigene ID, aber denselben Klassennamen. Also habe ich getElementByClassName, aber es funktioniert nicht auf anderen Bildschirm. Die Größe bleibt die Standardgröße (die Größe in der Canvas-Tag) Dann versuchte ich querySelectorAll für alle IDs (weil es für 1 ID arbeitete), aber immer noch nicht funktioniert. Bitte, etwas Hilfe hier. Danke.

function setCanvas() { 
    // using % of viewport for canvas bitmap (pixel ratio not considered) 
    var canvas = document.querySelectorAll("#BgCanvas, #SnakeCanvas, #Angel_PowerBallCanvas") 
     , vwWidth = window.innerWidth 
     , vwHeight = window.innerHeight 
     , percent = 60; 
    canvas.width = Math.round(vwWidth * percent/100); // integer pixels 
    canvas.height = Math.round(vwHeight * percent/100); 
    // not to be confused with the style property which affects CSS, ie: 
    // canvas.style.width = "60%"; // CSS only, does not affect bitmap 
} 

Answer 1

dieses Beispiel getElementByClassName verwenden, aber Sie müssen es in ein Array konvertieren, weil getElementByClassName eine HTML-Collection enthalten ist.

HTML

<canvas id="canvas1" class="canvas" ></canvas> 
<canvas id="canvas2" class="canvas" ></canvas> 
<canvas id="canvas2" class="canvas" ></canvas> 

CSS

.canvas {width: 100px; height: 100px;border: 1px solid red; margin: 10px; float: left;} 

SCRIPT

function setCanvas() { 
    // using % of viewport for canvas bitmap (pixel ratio not considered) 
    var canvas = document.getElementsByClassName("canvas") 
     , vwWidth = window.innerWidth 
     , vwHeight = window.innerHeight 
     , percent = 60; 
     var w = Math.round(vwWidth * percent/100); 
     var h = Math.round(vwHeight * percent/100); 

     // getElementByClassName("canvas") is a collection of HTML objects 
     // you'll need to convert the getElementByClassName into array by using [].slice.call() 
     [].slice.call(canvas).forEach(function(element) { 
      element.setAttribute("style", "height:" + h + "px;" + " width:" + w + "px;"); 
     }); 
} 
setCanvas();