canvas画布绘制矩形时形状被拉伸

最新推荐文章于 2024-08-18 10:07:21 发布

朽木自雕xmzd

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/qq_16687863/article/details/101153452

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

当使用canvas绘制矩形时，要注意：不要再样式中写width和height，需以width="400" height="400"此种方式指定宽高。

否则会出现绘制的矩形出现被拉伸的情况，见下图：

代码如下（错误示范，写在<style></style>也会被拉伸）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function(){
				var canvas = document.getElementById('test');
				if(canvas.getContext){
					var ctx = canvas.getContext('2d');
					ctx.fillStyle='#FF0000';
					ctx.strokeRect(10,10,100,100);
				}
			}
		</script>
	</head>
	<body>
		<canvas id="test" style="position: absolute; top: 100px;left: 100px; width: 400px;height: 400px;background-color: pink;">
			<span>您的浏览器不支持画布元素，请使用谷歌浏览器</span>
		</canvas>
	</body>
</html>

正确写法：

<canvas id="test" width="400" height="400" style="position: absolute; top: 100px;left: 100px;background-color: pink;">
	<span>您的浏览器不支持画布元素，请使用谷歌浏览器</span>
</canvas>

效果图：