HTML画布宽度无法调整大小。

Question

我想调整这个 Canvas 的宽度，但是我无法做到。无论如何 - 画布的宽度始终是屏幕的100％... 改变宽度和高度只会改变比例。也许有人知道问题出在哪里？

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

https://jsfiddle.net/schme16/xfyvvup8/20/

https://github.com/schme16/Chart.js-RangeSlider

- Darius Kaziukevičius

---

在您的 chartOptions 字典中，只需传递 responsive: false 选项即可。https://jsfiddle.net/xfyvvup8/89/ - Kaiido

Answer 1

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

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

.container {
    width: 500px;
}

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

示例: https://jsfiddle.net/xfyvvup8/88/

- nnnnnn

Answer 2

你可以使用canvas DOM的.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';

- Tirtha