谁能告诉我为什么这不是创建一个正方形？ [复制]答案

【问题标题】：Can anyone tell me why this isn't creating a square? [duplicate]谁能告诉我为什么这不是创建一个正方形？ [复制]
【发布时间】：2020-04-22 05:58:27
【问题描述】：

我正在学习有关画布的教程，但我很早就摆脱了困境。

代码如下：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
	
context.lineWidth = 3;
context.strokeStyle = "blue";
context.lineJoin = "square";
context.strokeRect(10,10,200,200);

#canvas{
	border: 1px solid black;
	display: block;
	width: 900px;
	height: 600px;
	margin: 0 auto;
}

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Canvas</title>
		<link rel="stylesheet" href="stylesheet.css" type="text/css">
	</head>
	
	<body>

		<canvas id="canvas"></canvas>
		
		<script src="script.js" type="text/javascript"></script>
		
	</body>
</html>

它看起来应该很简单，但它并没有达到我的预期。谁能给点建议？

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

画布的 height 和 width 最初应在 HTML 或通过 DOM 属性而不是 CSS 中设置，以避免调整大小。

来自MDN：

确实，该元素只有两个属性，width 和 height。这些都是可选的，也可以使用 DOM 设置特性。如果未指定 width 和 height 属性，则画布最初将是 300 像素宽和 150 像素高。 该元素可以通过 CSS 任意调整大小，但在渲染过程中图像被缩放以适应其布局大小：如果 CSS 大小不合适尊重初始画布的比例，它会显得扭曲。

因此，您的正方形也被调整为与画布相同的大小，并且不再完全适合其中。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
	
context.lineWidth = 3;
context.strokeStyle = "blue";
context.lineJoin = "square";
context.strokeRect(10,10,200,200);

#canvas{
	border: 1px solid black;
	display: block;
	margin: 0 auto;
}

&lt;canvas id="canvas" height="600" width="900"&gt;&lt;/canvas&gt;

【讨论】：

这根本不烦人。谢谢。
不客气！