我想调整这个 Canvas 的宽度,但是我无法做到。无论如何 - 画布的宽度始终是屏幕的100%... 改变宽度和高度只会改变比例。也许有人知道问题出在哪里?
<canvas id="ini" width="500" height="300"></canvas>
<canvas id="ini" width="500" height="300"></canvas>
<div class="container">
<canvas id="ini" width="500" height="300"></canvas>
</div>
.container {
width: 500px;
}
也就是说,将canvas元素放入另一个具有固定宽度的元素中。
.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';
chartOptions
字典中,只需传递responsive: false
选项即可。https://jsfiddle.net/xfyvvup8/89/ - Kaiido