【JavaScript实战经验】canvas画布出现高是宽的两倍，以及宽高不正确问题的处理（方法探索历程）

在使用 canvas 画布时，只在 css 中设置了宽和高，结果就出现了如标题描述的问题。

最终解决方案

手动为 canvas 标签加上宽和高设置
注意：和CSS的设置应一致，否则依旧会导致拉伸

HTML：
<canvas id="canvas" width="500" height="500"></canvas>

CSS：
#canvas 
{
	width: 500px;
	height: 500px;
	background-color: #999999;
}

代码

HTML：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="myCSS/map.css" type="text/css" rel="stylesheet">	
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="myJS/game.js" type="text/javascript"></script>	
	</body>
</html>

CSS：

#canvas 
{
	width: 500px;
	height: 500px;
	background-color: #999999;
}

JavaScript：

var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle="#333333";
ctx.fillRect(0, 0, 100, 100);

运行结果：
在这里插入图片描述
和想象中的完全不一样啊…

探索历程

问题发现：

先把宽和高调一下看看填满是个什么情况
在不断尝试中，发现当宽为300 高为150 时，画布完全被填满

并且：无论 CSS 的设置是什么样子的，整块画布总会是在 宽300高150 时被填满，完全不按照 CSS 的设置来

寻找原因：
经过查询，发现 标签 canvas 是有 默认值 的
默认值就是 宽300 高150
这就解决了为什么每次都是这对值使画布被填满

解决方法：
既然使默认值的锅，那就把默认值改了
将画布标签改为：
<canvas id="canvas" width="500" height="500"></canvas>

运行结果：
在这里插入图片描述
好的~ 已经解决了！

总结

根本原因就是 canvas 标签设置的宽高和 CSS 中设置的不一样，导致了画布的拉伸
出现高是宽的两倍也就是由默认值 宽300 高150 引起的拉伸

轻灵干净，澄澈清新，今晚的星空弥漫久违的烟火。（寒冰小澈）

posted @ 2021-02-12 20:54  IceClean  阅读(51)  评论(0)    收藏  举报