nec*_*666 4 html javascript css html5-canvas
我正在学习有关画布的教程，但我很早就摆脱了困境。
这是代码：
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>看起来它应该非常简单，但它并没有达到我的预期。任何人都可以建议吗？
画布的height和width最初应该在 HTML 中或通过 DOM 属性设置，而不是 CSS 以避免调整大小。
来自MDN：
实际上，该元素只有两个属性，
width和height。这些都是可选的，也可以使用 DOM 属性进行设置。当指定了nowidth和heightattributes 时，画布最初将是 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>| 归档时间： |
|
| 查看次数： |
67 次 |
| 最近记录： |