HTML5 Canvas 适合窗口

标签 html canvas size

当我这样做时,我试图让我的 Canvas 适合页面:

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

它只是在水平和垂直方向上添加了滚动条。 它的大小大约是滚动条的大小,在它们出现之前就被考虑在内(只是一个猜测)这是怎么回事,我将如何让它适应没有滚动条的页面。

最佳答案

将 Canvas 位置设置为absolute。还要确保在包含元素中没有设置填充或边距。

这就是我在所有全屏 Canvas 演示中使用的内容。

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

Full Screen Demo

关于HTML5 Canvas 适合窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15525560/

相关文章:

android - 如何在Android上绘制逆时针圆弧?

php - 如何获取服务器上的磁盘空间?

html - 提交按钮跨浏览器定位

javascript - 将 Canvas 另存为 jpg 到桌面

javascript - Mapbox静态图片生成的图片Url与DOM上的canvas不同

javascript - 如何将 LG 屏幕的列表显示为 3 列,SM 屏幕的列表显示为 1 列

r - 如何在页面上查找 R 图形的字节大小?

html - Bootstrap 列行为异常

javascript - 在我的网站上设置文件上传按钮的样式(输入类型 ="file"),它似乎运行良好,但在 iOS 上会发生变化

php - 在 while 循环中回显 css 类