Question

我有一个HTML画布设置为JavaScript中窗口的高度和宽度。但是，如果重新整形窗口，除非刷新页面，否则画布大小保持不变。

Answer 1

您可能希望创建一个Javascript窗口调整大小侦听器，以便在更改窗口大小时以编程方式设置画布的大小。

window.onresize = function(event) {
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    redraw(); // you must handle the redraw yourself
};

您只需调整画布的width和height，确保在自定义方法中redraw()。

查看此基本JSFiddle以显示此基本实现。

注意：

您可以设置canvas元素的CSS height和width，它可以按预期工作。

canvas {
    width: 50%;
}

这样做的问题是，如果同时指定width和height，则会在画布上绘制的任何内容中产生失真。但是，如果仅指定一个属性，则画布将按比例缩放。根据{{1}}的使用情况，这可能是一种可行的方法。

Answer 2

要动态调整画布大小，可以添加一个事件侦听器来检查窗口是否已调整大小。然后你可以重绘你的画布。

        function initialize() {
            // Register an event listener to
            // call the resizeCanvas() function each time 
            // the window is resized.
            window.addEventListener('resize', resizeCanvas, false);

            // Draw canvas border for the first time.
            resizeCanvas();
        }

        // Display custom canvas.
        // In this case it's a blue, 5 pixel border that 
        // resizes along with the browser window.                   
        function redraw() {
            context.strokeStyle = 'blue';
            context.lineWidth = '5';
            context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
        }

        // Runs each time the DOM window resize event fires.
        // Resets the canvas dimensions to match window,
        // then draws the new borders accordingly.
        function resizeCanvas() {
            htmlCanvas.width = window.innerWidth;
            htmlCanvas.height = window.innerHeight;
            redraw();
        }

有关其工作原理的更多详细信息，这里有一篇精彩的博文，其中列出了所有步骤 - http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

在重新塑造窗口时更新画布尺寸。

2 个答案: