调整HTML5画布大小以适应窗口

如何自动缩放HTML5 <canvas>元素以适应页面?

例如，我可以得到一个<div>通过设置高度和宽度属性为100%缩放，但一个<canvas>不会缩放，会吗?

当前回答

这对我很管用。伪代码:

// screen width and height
scr = {w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}
canvas.width = scr.w
canvas.height = scr.h

另外，就像devyn说的，您可以替换“document.documentElement”。宽度和高度均为“inner”的客户端:

**document.documentElement.client**Width
**inner**Width
**document.documentElement.client**Height
**inner**Height

它仍然有效。

2020-10-24 17:08:50

其他回答

除非你想让画布自动提升你的图像数据(这就是James Black的答案，但它看起来不漂亮)，你必须自己调整它的大小并重新绘制图像。画布居中

2009-11-04 13:52:23

这对我很管用。伪代码:

// screen width and height
scr = {w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}
canvas.width = scr.w
canvas.height = scr.h

另外，就像devyn说的，您可以替换“document.documentElement”。宽度和高度均为“inner”的客户端:

**document.documentElement.client**Width
**inner**Width
**document.documentElement.client**Height
**inner**Height

它仍然有效。

2020-10-24 17:08:50

下面是一个小而完整的代码片段，它结合了所有的答案。按:“运行代码片段”，然后按“完整页面”，调整窗口大小，以查看其运行情况:

这个片段使用画布。clientWidth和canvas。clientHeight而不是window。innerWidth和window。innerHeight使代码段在复杂布局中正确运行。然而，如果你只是把它放在一个使用全窗口的div中，它也适用于全窗口。这样更灵活。

代码片段使用了新窗口。请求animationframe重复调整画布的大小每帧。如果不能使用此方法，请使用setTimeout代替。而且，这是低效的。为了提高效率，存储clientWidth和clienttheight，只有当clientWidth和clienttheight改变时才重新计算和绘制。

“参考”分辨率的想法让你可以使用一个分辨率编写所有的绘制命令……并且它会自动调整到客户端大小，而无需更改绘图代码。

这个片段是不言自明的，但如果你喜欢用英语解释:https://medium.com/@doomgoober/resizing-canvas-vector-graphics- with-aliasing -7a1f9e684e4d

2020-08-28 23:36:14

基本上你要做的是将onresize事件绑定到你的body，一旦你捕捉到事件，你只需要使用window调整画布的大小。innerWidth和window.innerHeight。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>

    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>

<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>

2011-09-08 22:18:59

我认为这正是我们应该做的:http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);

2014-01-04 04:31:11

调整HTML5画布大小以适应窗口

推荐文章

最新文章

标签