HTML5 Canvas适合窗口 [英] HTML5 Canvas fit to window

问题描述

我想让我的画布适合页面，当我这样做：

I'm trying to get my canvas to fit the page, when i do:

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

它在水平和垂直方向上是在添加滚动条。
它的大小是关于滚动条的大小被考虑之前，他们甚至有（只是一个猜测）是这发生了什么，我将如何获得它适合页面没有

It goes just over horizontally and vertically which is adding scroll bars. the size its going over is about the size of the scroll bars are being accounted for before they're even there (just a guess) is this whats happening, how would I go about getting it to fit the page with no scrollbars.

推荐答案

将画布位置设置为 absolute 。

这是我在我所有的全屏幕画布演示中使用的。

This is what I use on all of my full screen canvas demos.

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

全屏演示

Full Screen Demo

这篇关于HTML5 Canvas适合窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！