Question

我想调整此Canvas宽度，但我不能。无论如何 - 画布宽度是屏幕的100％...更改宽度和高度仅改变比率。也许有人知道问题在哪里？

    <canvas id="ini" width="500" height="300"></canvas>

Answer 1

我猜你正在使用的图表库正在进行一些调整大小。但由于我没有时间阅读图书馆的代码，这里有一个解决方法：

<div class="container">
    <canvas id="ini" width="500" height="300"></canvas>
</div>

.container {
    width: 500px;
}

也就是说，将canvas元素放在另一个具有固定宽度的元素中。

Answer 2

您可以使用canvas DOM的.height和.width属性。它可以与height和width属性相同。您需要在JS代码中重新调整大小。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.height = 500;
canvas.width  = 500;

这些是画布的逻辑维度。现在，您可以设置.style.height和.style.width CSS属性。如果您未设置样式属性，则画布的固有大小将用作显示大小。然后，如果您设置CSS属性并且它们与画布尺寸不同，则您的内容将由浏览器呈现和缩放。假设您使用上述内容添加这些行。

canvas.style.width  = '750px';
canvas.style.height = '500px';