Make canvas fill the whole page

2020-05-30 03:32发布

站内问答 / JavaScript
1176 7 5

How can I make canvas be 100% in width and height of the page?

7条回答
狗以群分
2楼-- · 2020-05-30 03:39

You can programatically set the canvas width + height:

// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();

I've tested this and it as long as you redraw what's on the canvas after you've resized it won't change the scaling.

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
3楼-- · 2020-05-30 03:45

you can use these codes without jquery

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
4楼-- · 2020-05-30 03:49

Well I have it working here: Are Google's Bouncing Balls HTML5? by using the following CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

Where #c is the id of the canvas element.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2020-05-30 03:50

Does this work for you?

<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>

from Force canvas element in html to take up the entire window?

查看更多
0人赞 添加讨论(0) 举报
混吃等死
6楼-- · 2020-05-30 03:51

This has something to do with <canvas> tag.

when create fullscreen canvas, <canvas> will cause scrollbar if not set to display:block.

detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
7楼-- · 2020-05-30 03:56 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

maybe that easy?

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)