窗口调整大小事件的响应画布

Question

我是画布概念的新手，我正在尝试使用D3.js绘制画布。我想根据窗口大小使画布响应。

  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 

这不会影响画布的分辨率（像素数）。画布分辨率通过其宽度和高度属性设置，并始终以像素为单位。这些是与实际设备显示像素不直接相关的抽象像素，也不直接与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"; 
}