时间戳

首页 > 解决方案 > 谁能告诉我为什么这不是创建一个正方形？

javascript - 谁能告诉我为什么这不是创建一个正方形？

问题描述

我正在按照一个教程来学习画布，而且我很早就被困住了。

这是代码：

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>

看起来它应该很简单，但它并没有达到我的预期。任何人都可以建议吗？

标签： javascripthtmlcsshtml5-canvas

解决方案

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

来自MDN：

实际上，该元素只有两个属性，width并且 height. 这些都是可选的，也可以使用 DOM 属性进行设置。指定nowidth和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;
}
<canvas id="canvas" height="600" width="900"></canvas>

推荐阅读