javascript - 如何获取放置在响应式 HTML 页面上的 Canvas 的宽度

Question

我的 HTML 文件

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

我的 CSS 文件

#canvas
{
    width:100%;
    height:100%;
}

#myCanvas
{
    width:100%;
    height:40%;
}

我正在使用 Javascript 在 Canvas 上绘制图像(1 秒后重新绘制)。此页面是响应式的。所以 Canvas 宽度随着浏览器宽度的变化而变化。在 ImageDraw 函数中，我试图获取 Canvas 的宽度

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");

canvaswidth = c.width;

但即使在更改浏览器的宽度后，我的 Canvas 宽度仍为 300。这是什么问题。

Answer 1

HTMLCanvasElement 的实际尺寸由其“宽度”和“高度”属性定义，这与 CSS 样式声明不同!将 CSS 属性设置为不同于 Canvas 宽度和高度的属性将导致浏览器缩放 Canvas ，就像缩放内容一样。

为了满足您的期望，您需要明确设置 Canvas 的宽度和高度以匹配您期望从 CSS 声明中获得的百分比，即:测量 Canvas 父容器的尺寸(以像素为单位)(假设本例中的宽度为 320px)，将其乘以选择的百分比(假设 90% 即 320 * .9 == 288 像素)并将其设置到 Canvas 的 width 属性上，对 height et voila 执行相同的操作.

注意:这对您的绘制方法有影响，具体取决于您将内容绘制到 Canvas 上的方式(即，当使用坐标和尺寸的绝对值时)它实际上可能更可行让它通过 CSS 缩放!