javascript - 我无法使用宽度和高度属性正确地重新缩放

Question

我正在使用 Charts.js图书馆和我的<canvas>当我尝试通过更改它的 width 来重新缩放它时，元素表现得很奇怪和 height属性

我肯定遗漏了什么，请记住我捕获了整个窗口

这里有一些例子:

• 宽度=400，高度=100

• width="100"height="100"

• width="10"height="20"

• width="400"height="50"

Try it here ，这应该是一个 10x10正方形(很小吧？)

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> 
<canvas id="myChart" width="10" height="10"></canvas>

为什么我不能把它变成100x100正方形？并且不被放置在整个浏览器中？我需要一个placeholder吗？为此？

这是 playground这使得图形不可调整大小，您可能会在 desktop 中注意到查看 mobile景色很完美

• 桌面 View

• 手机浏览

注意:

当 <div>不包括在内并且<canvas>没有attributes在浏览器中它很大，在移动分辨率上是完美的。如果你申请width和 height至 <div>其中包含 <canvas>您可以调整它的大小，但在移动设备上会被拉伸(stretch)。

编辑:添加代码片段

Edit2: 添加了代码 Playground

Answer 1

发生这种情况是因为您默认激活了“响应式”。在这种情况下，宽度和高度属性将被忽略。

解决方案是像这样停用响应选项:

 options: {
    responsive:false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}