Отзывчивый холст при изменении размера окна

Question

Я новичок в концепции холста, я пытаюсь нарисовать холст, используя D3.js. Я хочу сделать canvas максимально адаптивным в зависимости от размера экрана.

  function onResize(){
           var element = document.getElementsByTagName("canvas")[0];
           var context = element .node().getContext("2d");
           var scrnWid = window.innerWidth,
               scrnHgt = window.innerHeight,
               elementHgt = element.height,
               elementWid = element.width;

           var aspWid = elementWid/scrnWid;
           var aspHig = elementHgt/scrnHgt;
           context.scale(aspWid,aspHig);    
         } 

   window.addEventListener("resize",onResize);

Это код, который я использовал для изменения размера холста, но он не работает. Я не хочу использовать какую-либо библиотеку, кроме D3.js. Кто-нибудь может предложить мне лучшее решение?

Answer 1

2DContext.scale() изменяет отображаемый контент, но не отображает размер / разрешение

Вы не изменяете размер холста, все, что вы делаете, это масштабируете содержимое холста.

Вы можете установить размер страницы холста через его свойства стиля

canvas.style.width = ?; // a valid CSS unit 
canvas.style.height = ?; // a valid CSS unit 

Это не влияет на разрешение (количество пикселей) холста. Разрешение холста задается с помощью его свойств width и height и всегда в пикселях. Это абстрактные пиксели, которые не имеют прямого отношения к фактическим пикселям дисплея устройства и не имеют прямого отношения к пикселям CSS (px). Ширина и высота - это числа без постфикса CSS

 canvas.width = ?; // number of pixel columns 
 canvas.height = ?; // number of pixel rows

Установка 2D контекста масштаба не влияет на размер дисплея или разрешение дисплея, context.scale(?,?) влияет только на отображаемый контент

Чтобы масштабировать холст под страницу

const layout = {  // defines canvas layout in terms of fractions of window inner size
    width : 0.5,
    height : 0.5,
}

function resize(){
    // set the canvas resolution to CSS pixels (innerWidth and Height are in CSS pixels)
    canvas.width = (innerWidth * layout.width) | 0;  // floor with |0
    canvas.height = (innerHeight * layout.height) | 0;

    // match the display size to the resolution set above
    canvas.style.width = canvas.width + "px"; 
    canvas.style.height = canvas.height + "px"; 
}