canvas笔记-canvas适应浏览器（填充整个页面）

IT1995

于 2020-05-29 17:28:21 发布

阅读量2.2k

点赞数 39

分类专栏： Web相关技术 web前端文章标签： HTML canvas web前端

本文链接：https://blog.csdn.net/qq78442761/article/details/106429718

版权

web前端同时被 2 个专栏收录

186 篇文章

订阅专栏

Web相关技术

163 篇文章

订阅专栏

这里有2个地方要设置：

1.html中的style。

2.在js中获取父类的width或height。

如下，第一个问题：

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	
	<style type="text/css">
	html {
		width: 100%;
		height: 100%;
	}
	body {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	#canvasContainer {
		width: 100%;
		height: 100%;
	}
	#myCanvas {
		width: 100%;
		height: 100%;
	}
	</style>
</head>
<body style="height:100%">
	<div id="canvasContainer">
	    <canvas id="canvas" style="height:100%">
			当前浏览器不支持Canvas，请更换浏览器后再试
		</canvas>
	</div>
    <script src="digit.js"></script>
    <script src="countdown.js"></script>
</body>
</html>

在canvas上套个div然后把所有相关结点的height都设置为100%

下面是脚本方面的设置：