通过CSS与元素属性确定HTML5画布的大小

我不明白为什么下面的代码片段会产生不同的结果，因为css会在放大画布时缩放画布

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

#帆布{
宽度：800px；
高度：600px；
}

与此方法（按预期工作）相反：

解释如下：如另一篇帖子所示，谢谢

canvas元素的内在维度等于坐标空间的大小，数字以CSS像素表示。但是，可以通过样式表任意调整元素的大小在渲染过程中，将缩放图像以适应此布局大小

---

想想如果你有一个32x32的JPG（它总共有1024个像素），但是通过CSS指定它应该显示为

width:800px；高度：16px

。同样的情况也适用于HTML画布：

• canvas元素本身的

  宽度

  和

  高度

  属性决定可以绘制多少像素。如果未指定画布元素的高度和宽度，则：
  “宽度”属性默认为300，“高度”属性默认为150

• width

  和

  height

  CSS属性控制元素在屏幕上显示的大小。如果未设置CSS维度，则元素的固有大小将用于布局

---

如果在CSS中指定的尺寸与画布的实际尺寸不同，则浏览器必须根据显示需要拉伸和挤压画布。您可以在这里看到这样一个示例：

调整画布大小的最佳方法是将其包含在div中，并根据需要的大小设置div的样式

这是CSS

<style>
#divCanvas{
    width: 800px;
    height: 600px;
}
</style>

#帆布{
宽度：800px；
高度：600px；
}

这是HTML

<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>

您能解释一下“因为css会在放大画布时缩放画布”的意思吗？干杯是的，当您应用css样式时，画布适合800x600，但其中的内容是“放大的”，就像画布坐标系保持其默认大小，但是“拉伸的”。如果我不清楚，请告诉我。我正在使用Firefox 4.0B11这可能会有所帮助：注意画布的

宽度

和

高度

属性不应该有维度（与CSS不同）。你应该有

width=“800”

，而不是

width=“800px”

.s/维度/显式像素单位/这是我见过的关于画布坐标系如何工作的最有用的答案。@Phrogz的答案比公认的答案更清楚。具有由其

高度

和

宽度

HTML属性（或默认的300x150）指定的像素尺寸的画布将缩放到CSS属性指定的大小。@Phrogz我认为这似乎是正确的答案。作为一个补充，我使用的是这样的画布从CSS中获取其大小。

子字符串

将从字符串

const canvas=document.querySelector（“canvas”）的末尾删除
px
；const compStyles=window.getComputedStyle（画布）；canvas.width=compStyles.width.substr（0，compStyles.width.length-2）；canvas.height=compStyles.height.substr（0，compStyles.height.length-2）如果我想在调整浏览器大小时更改画布的实际大小，该怎么办？@RonInbar为调整大小事件添加一个事件侦听器，并设置画布元素的
宽度
和
高度
属性，以匹配显示其实际大小的
偏移宽度
和
偏移宽度
属性。例如：
<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>