HTML5 Canvas 的width/height 与style.width/height

最新推荐文章于 2023-10-30 23:25:34 发布

原创最新推荐文章于 2023-10-30 23:25:34 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #Canvas

本文深入探讨了HTML5 Canvas元素中width和height属性的区别，解释了为何给Canvas设置width和height后绘图成功，以及它们与CSS设置的width和height之间的联系与区别。

HTML5 中Canvas元素的width和height属性如果不搞清楚就很容易犯些莫名其妙的错误。

先看这段代码：

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			window.onload=function(){
				var myCanvas = document.getElementById("myCanvas");
				var ctx = myCanvas.getContext("2d");
				ctx.fillStyle="yellow";
				ctx.fillRect(0,0,20,20);
			}
		</script>
		<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			#myCanvas{
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: 400px;
				height: 400px;
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas"></canvas>
	</body>
</html>

代码很简单，目的本来是想要在Canvas里绘制一个宽20，长20的黄色矩形（其实也就是个正方形），但是结果出来却是：

画出的居然不是正方形，修改代码，将

<canvas id="myCanvas" ></canvas>

改为

<canvas id="myCanvas" width="400" height="400"></canvas>

绘图成功

为什么给加上width和height之后就成功了，而之前的代码里明明也给canvas设置了width和height，难道没起作用么。做引在于在css中设置的width&height与在canvas中设置的内联width和height并不是一个东西。简单的说，style里设置的width和height（带单位的）是设置canvas的实际像素大小的，为了方便查看，我给canvas加了一个边框，这个canvas大小为400px * 400 px。而在canvas内联属性设置的width和height则是相对更抽象一点的大小，可以理解为是把canvas分割成width列，height行，如果没有对它进行设置，默认值是width：300，height：150，再回头看开始的那张图，画出的黄色矩形高正好是宽的两倍，因为实际宽= 20 / 300 * 400px, 高=20/150*400px。不适用内联方式也可以设置canvas的width&height。

myCanvas.width=400;
myCanvas.height=600;

而在canvas的style里设置的width&height通过JS的设置方法是：

myCanvas.style.width="400px";
myCanvas.style.height="600px";