Как изменить Stats.js размер?

#javascript #css #html5-canvas #size

#javascript #css #html5-canvas #размер

Вопрос:

Я пытаюсь изменить размер Stats.js холст. Я пытался использовать CSS, но не могу присвоить идентификатор этому конкретному canvas элементу, поэтому попробовал это:

HTML:

 <div class="modal_container" id="modal_graph">        
   <img id="moveModalImage" src="images/moveIcon.png" alt="Move modal window."/>
   <span onclick='document.getElementById( "modal_graph" ).style.display= "none";' class="close-button">×</span>
   <p>Performance over Time Graph</p>
   <hr>

   <div id="modal_4-content">
     <!-- Add Stats.GUI here -->

   </div>

</div>

CSS:

 #modal_4-content canvas{
    width: 240px; //Doesn't work
    height: 150px; //Doesn't work
    float: left; //Works fine
    padding-right: 60px; //Works fine
}

JS:

 function createStatsGUI(){

    var thisParent = document.getElementById("modal_4-content");

    //Create new Graph (FPS, MS, MB)
    stats1 = new Stats();

    //Display different panel
    stats1.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3 : custom
    stats1.domElement.style.width = '200px';
    stats1.domElement.style.height = '200px';

    //Add Stats to Document - modal 4
    thisParent.appendChild( stats1.domElement );  
}

Если вы знаете, как это изменить, пожалуйста, дайте мне знать. Спасибо за ваше время.

Ответ №1:

Это решило проблему:

 function createStatsGUI(){

    //Create new Graphs (FPS, MS, MB)
    statsGUI = new Stats();
    statsGUI.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3 : custom

    var thisParent = document.getElementById("modal_4-content");
    thisParent.appendChild( statsGUI.domElement );

    var statsALL = document.getElementById("modal_4-content").querySelectorAll("canvas");

    for(var i=0; i<statsALL.length; i  ){
        statsALL[i].style.width = "100%";
        statsALL[i].style.height = "160px";
        //...
    }
}

Ответ №2:

Попробуйте это

  thisParent.firstChild.width =100;
 thisParent.firstChild.height=100;

Вместо

 thisParent.child.style.height=100

Ожидаемый html в моем случае

  <div id="modal_4-content"><canvas></canvas>
 </div>

Нет пробела между родительским и дочерним

   <div id="modal_4-content"><canvas></canvas> 
           //canvas is the first element  here try Ur update 1,2,3
          //If not go with queryselector
   </div>

Выбор запросов

   var canvas = thisParent.querySelector('canvas');
  canvas.width = 500;
  canvas.height = 500;

Другой стиль рисования холста не повлияет на изменение размера холста.Вам нужен прямой встроенный атрибут для изменения ширины и высоты при изменении размера.

1. Я обновил свой вопрос. Ваше предложение не выдает ошибку. Хотя он ничего не обновляет. Вы имеете в виду, что я должен получить доступ к 2dContext холста?

2. Добавьте контейнер canvas, пожалуйста, html

3. Нужно знать, как canvas генерируется внутри tat contaier <идентификатор div=»modal_4-content»> <!— Добавить статистику. Графический интерфейс здесь -> <canvas></холст> ????? //canvas — это первый элемент здесь, попробуйте Ur </div>

4. Я использую это thisParent.appendChild( stats1.domElement ); для того, чтобы элемент <canvas> располагался прямо в середине <div id="modal_4-content"> .

Ответ №3:

Я думаю, вы можете получить все дочерние узлы, используя .childnodes