Question

我的HTML文件

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

我的CSS文件

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

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

使用Javascript我在画布上绘制图像（1秒后重绘）。本页面是响应式的。因此浏览器宽度随着浏览器宽度的变化而变化。在ImageDraw函数中我试图获得画布宽度

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

canvaswidth = c.width;

但即使改变了浏览器的宽度，我也会将画布宽度设为300.问题是什么。

Answer 1

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

为了满足您的期望，您需要的是明确设置画布的宽度和高度以匹配您对CSS声明所期望的百分比，即：测量画布的父容器的尺寸（以像素为单位）让我们假设在这个例子中宽度为320px），将其乘以选择的百分比（假设为90％，即320 * .9 == 288像素）并将其设置到画布的宽度属性上，对高度和η进行相同的操作

注意：这会对您的绘图方法产生影响，具体取决于您将内容绘制到画布上的方式（即使用坐标和尺寸的绝对值时），它实际上可能更可行只是通过CSS缩放它！

如何获得放置在响应式HTML页面上的画布宽度

1 个答案: