canvas进阶（1）：Canvas元素大小与绘图表面大小的区别

最新推荐文章于 2024-01-16 12:15:08 发布

xd_yangxiaoromg

最新推荐文章于 2024-01-16 12:15:08 发布

阅读量2.9k

点赞数 1

文章标签： canvas canvas元素大小和绘图表面大小的区别

本文链接：https://blog.csdn.net/xd_yangxiaoromg/article/details/86221455

版权

接下来，需要介绍一下什么是canvas元素的大小和绘图表面的大小。

我们一般通过canvas元素的width和height属性来改变元素的大小，我们也可以通过CSS来设置canvas元素的大小。但是，两种设置方式效果是不一样的。

使用CSS来设置canvas元素的大小与直接设置属相相比，其差别是基于这样一个事实：canvas元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面的大小。

而设置元素的width和height属性时，实际上市同时修改了改元素本身的大小与元素绘图表面的大小。然而，如果是通过CSS来设定canvas元素的大小，那么只会改变元素本身的大小，而不会影响到绘图表面。

在默认情况下，canvas元素与其绘图表面，都是300px宽，150px高，若我们使用CSS来将canvas元素的大小设置成600px宽、300px高，canvas元素的width和height不设置或者是设置成<canvas id="clock" width="300" height="150">，那么绘图表面大小依然没有改变，还是300*150。这时，当canvas元素的大小不符合起绘图表面的大小时，浏览器就会对绘图表面进行缩放，使其符合元素的大小。

下面举个栗子：

1、在默认画布上绘图：

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<style type="text/css">
		#canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="150">
		该浏览器不支持canvas！
	</canvas>
	<script type="text/javascript">
		var myCanvas = document.getElementById('canvas');
		var context = myCanvas.getContext('2d');
		context.font="15px Arial";
		context.fillStyle="blue";
		context.strokeStyle="green";
		context.textAlign = 'center';
		context.textBaseline = 'bottom';
		context.fillText('Hello,canvas!',myCanvas.width/2, myCanvas.height/2)
		context.strokeText('Hello,canvas!',myCanvas.width/2+20, myCanvas.height/2+50)
	</script>
</body>
</html>

2、使用CSS改变画布大小，但是canvas属性维持默认值

#canvas{
    background: #ddd;
    width:600px;
    height:300px;
}

可见，原本15px的字因为canvas元素的大小和绘图表面的大小不一致被等比例放大了。

3、而我们想要的应该是这样的效果，画布变大，但是文字大小依然是15px。

//html
<canvas id="canvas" width="600" height="300">
	该浏览器不支持canvas！
</canvas>

//CSS
#canvas{		
    background: #ddd;
    width:600px;
    height:300px;
}