谁能告诉我为啥这不是创建一个正方形？ [复制]
Posted
技术标签:
【中文标题】谁能告诉我为啥这不是创建一个正方形？ [复制]【英文标题】：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>它看起来应该很简单，但它并没有达到我的预期。谁能给点建议？
【问题讨论】：
【参考方案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;
<canvas id="canvas" height="600" width="900"></canvas>【讨论】：
这根本不烦人。谢谢。 不客气！以上是关于谁能告诉我为啥这不是创建一个正方形？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章