英文:
Can anyone tell me why this isn't creating a square?
问题
我正在按照教程学习Canvas，并且在早期遇到了困难。
以下是代码部分：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
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);
<!-- 语言: lang-css -->
#canvas{
border: 1px solid black;
display: block;
width: 900px;
height: 600px;
margin: 0 auto;
}
<!-- 语言: lang-html -->
<!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>
<!-- 结束代码片段 -->
看起来应该很简单，但它并没有按照我的期望工作。有人可以提供建议吗？
英文:
I'm following a tutorial to learn about canvas, and I'm unstuck pretty early on.
Here is the code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-css -->
#canvas{
border: 1px solid black;
display: block;
width: 900px;
height: 600px;
margin: 0 auto;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
It seems like it should be pretty straight-forward, but it's not doing what I expect. Can anyone advise?
答案1
得分: 7
<canvas>元素的height和width应该最初在HTML中或通过DOM属性设置，而不是通过CSS来避免重新调整大小。
从MDN中的引用：
实际上，
<canvas>元素只有两个属性，width和height。这两个属性都是可选的，也可以使用DOM属性来设置。当没有指定width和height属性时，画布最初的宽度为300像素，高度为150像素。可以通过CSS任意调整元素的大小，但在渲染时，图像会被缩放以适应其布局大小：如果CSS大小不 res 不尊重初始画布的比例，它会显得扭曲。
因此，你的正方形也被调整为与画布相同的大小，无法完全适应其中。
<canvas id="canvas" height="600" width="900"></canvas>
英文:
The height and width of the canvas should initially be set in HTML or via DOM properties, not CSS to avoid resizing.
From MDN:
> Indeed, the <canvas> element has only two attributes, width and
> height. These are both optional and can also be set using DOM
> properties. When no width and height attributes are specified, the
> canvas will initially be 300 pixels wide and 150 pixels high. The
> element can be sized arbitrarily by CSS, but during rendering the
> image is scaled to fit its layout size: if the CSS sizing doesn't
> respect the ratio of the initial canvas, it will appear distorted.
Because of this, your square was also being resized to the same size of the canvas and could no longer fit completely within it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-css -->
#canvas{
border: 1px solid black;
display: block;
margin: 0 auto;
}
<!-- language: lang-html -->
<canvas id="canvas" height="600" width="900"></canvas>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论