调整HTML5画布的大小以适合窗口

400

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

例如，我可以<div>通过将height和width属性设置为100％来缩放，但是<canvas>不会缩放吗？

javascript  html  html5-canvas 
— 德文
source
7
为什么画布{width：100％; height：100％}不起作用？
— zloctb 2014年
28
@zloctb-这将直接放大画布，从而拉伸图像。
— 德里克·朕会功夫
8
请参阅WebGL基础知识，以获取有关相关问题的注意事项和不应该做什么的详细说明。
— legends2k '16
2
画布也可以很好地缩放，只需添加css {width：100％}，它的内容就不会了，那完全是另一回事了！
— ejectamenta

Answers:

372

我相信我已经找到了一个优雅的解决方案：

的JavaScript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

的CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

到目前为止，对我没有太大的负面性能影响。

— 德文
source
7
您可能需要与body, html { margin: 0px;}
— Nicklas A.
45
这比收听resize事件更好吗？
— 埃里克（Eric）
25
@Elisabeth：要摆脱滚动条，请在html和body元素的样式中添加“ overflow：hidden”。参见thefutureoftheweb.com/blog/100-percent-height-interface
— Denis Washington，
17
我这样做了，而且我还将canvas设置为display：block（它似乎默认显示为：inline，这在创建额外的空间！）。
— 伊丽莎白2012年
15
这可能是反模式；有关原因和解决方法，请参见此处的第三项。
— legends2k
67

以下解决方案最适合我。由于我对编码还比较陌生，因此我希望直观地确认某件事正在按我期望的方式工作。我在以下站点找到它：http : //htmlcheats.com/html/resize-the-html5-canvas-dyamically/

这是代码：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (function() {
        var
        // Obtain a reference to the canvas element using its id.
        htmlCanvas = document.getElementById('c'),
        // Obtain a graphics context on the canvas element for drawing.
        context = htmlCanvas.getContext('2d');

       // Start listening to resize events and draw canvas.
       initialize();

       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();
        }
    })();

    </script>
</body> 
</html>

蓝色边框向您显示调整大小的画布的边缘，并且始终沿窗口的边缘，在所有4侧均可见，而上述其他一些答案中的情况并非如此。希望能帮助到你。

— 克雷格·莫里森
source
这个答案解决了我的问题。该overflow: hidden和display: block是少了什么对我来说，适当地得到这个工作。
— Deathicon '18 -4-6
1
链接已断开
— Nic Sc​​ozzaro
22

基本上，您要做的就是将onresize事件绑定到您的身体，一旦捕获到该事件，您只需要使用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>
— 马夫
source
1
您可以只使用事件侦听器。
— David Corbin 2014年
它具有边距并显示滚动条，另外您还必须在执行任何操作之前调整屏幕的大小。
— ArtOfWarfare
如果画布大于视口（将视口变窄或变短）怎么办？此解决方案似乎无法解决该问题。
— 拉尔斯·吉鲁普·布林克·尼尔森
@ArtOfWarfare原始问题未提及任何样式。但是您可以使用CSS对其进行样式化，并删除边距并根据需要隐藏滚动条。您只需添加`<body onload =“ resize_canvas（）”>`，然后在页面加载时调整画布大小即可。
— equiman 2013年
@LayZee原始问题saya bout缩放画布以适合 页面，而不是视口。那可能是另一个问题。
— Equiman
19

根据浏览器客户端的尺寸设置画布坐标空间的宽度和高度需要您在每次调整浏览器大小时重新调整大小并重新绘制。

较不复杂的解决方案是在Javascript变量中保留可绘制的尺寸，但根据screen.width，screen.height尺寸设置画布尺寸。使用CSS来适合：

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

浏览器窗口通常不会比屏幕本身大（除非错误地报告了屏幕分辨率，因为不匹配的双显示器可能会出现错误），因此背景不会显示，像素比例也不会改变。除非使用CSS缩放画布，否则画布像素将与屏幕分辨率成正比。

— 球衣男孩
source
7
用CSS重新缩放画布很麻烦。至少在Chrome和Safari上，鼠标/触摸事件的位置与画布像素位置不会1：1对应，因此您必须转换坐标系。
— jerseyboy
14

甲纯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对应，因此您必须转换坐标系。

— 沃尔克E.
source
5
CSS方式拉伸画布，从而渲染图像得到拉伸。与调整画布大小相比，这是不好的。只要稍加调整，克雷格的答案就可以发挥最佳效果。
— Nayan 2015年
我喜欢这种解决方案，因为这使画布基于父级宽度为100％。
— Maihan Nijat
9 
function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);
— 彼得
source
不错，当比率很重要时
— 萨科罗卡
8

除非您希望画布自动放大图像数据（这就是James Black的答案，但看起来并不漂亮），否则您必须自己调整大小并重新绘制图像。使画布居中

— 尼古拉
source
4

如果您的div完全填满了网页，那么您可以填充该div，因此可以使用画布来填充div。

您可能会发现这很有趣，因为您可能需要使用css来使用百分比，但是，这取决于您使用的浏览器，以及与规范相符的程度：http : //www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html＃the-canvas-element

canvas元素的固有尺寸等于坐标空间的大小，其数字以CSS像素表示。但是，可以通过样式表任意设置元素的大小。在渲染期间，将缩放图像以适合此布局大小。

您可能需要获取div的offsetWidth和height，或者获取窗口的高度/宽度并将其设置为像素值。

— 詹姆斯·布莱克
source
3

的CSS

body { margin: 0; } 
canvas { display: block; }

的JavaScript

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});
— 马丁·万特克
source
3

如果您对保留长宽比感兴趣，并希望使用纯CSS（给定的长宽比）进行操作，可以执行以下操作。关键是确定元素大小的元素padding-bottom上的键。相对于其父级的宽度大小是默认的。此处指定的比例必须与元素上的尺寸比例匹配。::contentcontainer100%canvas

// Javascript

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);
/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}
<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>
展开摘要

— 麦格瑞格
source
2

使用jQuery，您还可以跟踪窗口的大小并使用jQuery更改画布的宽度。

像这样

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
展开摘要

— 拉斐尔·安德拉德（Rafael Andrade）
source
1 
(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();
    });

}());
— ker客
source
0

我认为这是我们应该做的：http : //www.html5rocks.com/zh-CN/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);
— 阿文德·巴德瓦（Arvind Bhardwaj）
source
-2

我正在使用sketch.js，因此在运行画布的init命令后，我使用jquery更改了宽度和高度。尺寸基于父元素。

$（'＃DrawCanvas'）。sketch（）。attr（'height'，$（'＃DrawCanvas'）。parent（）。height（））。attr（'width'，$（'＃DrawCanvas'）。parent （）。宽度（））;

— 莫伊斯科尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.