问答中心分类: HTML调整HTML5画布大小以适应窗口
0
匿名用户 提问 21分钟 前

如何自动扩展HTML5元素是否适合页面?
例如,我可以得到一个to scale by setting the height and width properties to 100%, but a won't scale, will it?

16 Answers
0
Craig Morrison 回答 21分钟 前

以下解决方案对我最有效。由于我对编码比较陌生,我喜欢通过视觉确认某些东西是否按我预期的方式工作。我在以下网站找到了它:http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/
代码如下:

(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();
  }
})();
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  /*  Disable scrollbars */
  display: block;
  /* No floating content on sides */
}
<canvas id='c' style='position:absolute; left:0px; top:0px;'></canvas>

蓝色边框显示了调整大小画布的边缘,始终沿着窗口边缘,在所有四个面上都可见,而上述一些答案的情况并非如此。希望有帮助。

Deathicon 回复 21分钟 前

这个答案解决了我的问题。这个overflow: hiddendisplay: block是我缺少的让它正常工作的东西。

Nic Scozzaro 回复 21分钟 前

链接已断开

Xan-Kun Clark-Davis 回复 21分钟 前

这不起作用。它拉伸画布内容。

JHBonarius 回复 21分钟 前

@Xan Kuncark Davis,这可能取决于其他代码是否取决于画布的宽度和高度。

Xan-Kun Clark-Davis 回复 21分钟 前

结果是windows中的字体缩放。如果设置为125%,不知何故(?)这会影响在chrome中渲染画布。当我将其设置为100%时,一切正常。

DoomGoober 回复 21分钟 前

@Xan Kuncark Davis 125%通常与设备像素分辨率调整有关。基本上,如果你使用的是高像素密度的设备,字体看起来会比应该的小……所以它会放大,使字体大小正常。据我所知。您可以使用:window.devicePixelRatio检查显示。正常设备为1,高DPR通常为1.25。

Xan-Kun Clark-Davis 回复 21分钟 前

@DoomGoober确认了!窗在所讨论的设备上,devicePixelRatio为1.5625。

0
equiman 回答 21分钟 前

基本上,您需要做的是将onresize事件绑定到您的身体,一旦捕捉到事件,您只需要使用窗口调整画布大小。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>
David Corbin 回复 21分钟 前

您可以只使用事件侦听器。

ArtOfWarfare 回复 21分钟 前

它有边距并显示滚动条,此外,在做任何事情之前,你必须调整屏幕大小。

Lars Gyrup Brink Nielsen 回复 21分钟 前

如果画布比视口大(当使视口更窄或更短时),该怎么办?这个解决方案似乎无法解决这个问题。

equiman 回复 21分钟 前

@最初的问题并没有提及任何风格。但是如果你喜欢的话,你可以用css样式化它,去掉边距,隐藏滚动条。您只需添加“即可在页面加载时调整画布大小。

equiman 回复 21分钟 前

@LayZee原始问题saya bout缩放画布以适合,而不是视口。这可能是另一个问题。

0
jerseyboy 回答 21分钟 前

根据浏览器客户端的尺寸设置画布坐标空间的宽度和高度,需要您在每次调整浏览器大小时调整大小并重新绘制。
一个不那么复杂的解决方案是在Javascript变量中维护可绘制维度,但根据屏幕设置画布维度。宽度,屏幕。高度尺寸。使用CSS来适应:

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

浏览器窗口通常不会比屏幕本身大(除非屏幕分辨率被误报,因为它可能与不匹配的双显示器一起),因此背景不会显示,像素比例也不会变化。除非使用CSS缩放画布,否则画布像素将与屏幕分辨率成正比。

jerseyboy 回复 21分钟 前

用CSS重新缩放画布很麻烦。至少在Chrome和Safari上,鼠标/触摸事件位置不会与画布像素位置1:1对应,您必须变换坐标系。

0
Volker E. 回答 21分钟 前

A.纯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和

Nayan 回复 21分钟 前

CSS方式拉伸画布,从而拉伸渲染图像。与调整画布大小相比,这并不好。只要稍加调整,克雷格的答案效果最好。

Maihan Nijat 回复 21分钟 前

我喜欢这个解决方案,因为它使画布100%基于父宽度。

0
Petr 回答 21分钟 前
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);
sarkiroka 回复 21分钟 前

很好,当比率很重要时