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

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

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

当前回答

一个纯CSS的方法添加到解决方案@jerseyboy上面。适用于Firefox (v29测试)，Chrome (v34测试)和Internet Explorer (v11测试)。

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

链接到示例:http://temporaer.net/open/so/140502_canvas-fit-to-window.html

但要小心，正如@jerseyboy在他的评论中所说:

用CSS重新缩放画布是很麻烦的。至少在Chrome和 Safari中，鼠标/触摸事件的位置不会1:1对应 Canvas像素位置，你需要变换坐标系统。

2014-05-02 18:51:41

其他回答

下面的解决方案对我来说效果最好。因为我对编码相对陌生，所以我喜欢用视觉来确认某些东西是否按照我期望的方式工作。我在以下地点找到了它: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

代码如下:

蓝色边框显示了调整画布的边缘，并且总是沿着窗口的边缘，在所有4个面都可见，这不是上述其他一些答案的情况。希望能有所帮助。

2015-03-06 14:05:20

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

这个片段使用画布。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

2022的答案

在2022年，检查元素是否调整大小的推荐方法是使用ResizeObserver

const observer = new ResizeObserver(myResizeTheCanvasFn);
observer.observe(someCanvasElement);

它比窗户好。addEventListener('resize'， myResizeTheCanvasFn)或onresize = myResizeTheCanvasFn，因为它处理画布调整大小的每一种情况，即使它与窗口调整大小无关。

同样，使用window也没有意义。innerWidth window.innerHeight。你想要画布本身的大小，而不是窗口的大小。这样，无论你把画布放在哪里，你都会得到正确的大小，而不必重写你的尺寸代码。

至于用画布填满窗户

html, body {
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;   /* this is IMPORTANT! */
}

你需要display: block的原因是因为默认情况下画布是内联的，这意味着它在结尾包含额外的空间。没有显示:块你将得到一个滚动条。许多人通过在文档正文中添加overflow: hidden来修复滚动条问题，但这只是隐藏了画布的CSS设置不正确的事实。最好是修复bug(将canvas设置为display: block而不是使用overflow: hidden隐藏bug)

完整的示例

注意:还有其他与调整画布大小相关的问题。特别是如果你想处理不同的devicePixelRatio设置。请参阅本文了解更多信息。

2022-09-23 18:51:34

基本上你要做的是将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

(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());

2014-03-25 17:41:37

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

推荐文章

最新文章

标签