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

发布2020-05-29浏览1830次

详情内容

这里有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>