画布在使用CSS时被拉伸，但是普通的画布具有“宽度”/“高度”属性。

Question

画布在使用CSS时被拉伸，但是普通的画布具有“宽度”/“高度”属性。

我有两个画布，一个使用HTML属性width和height为了调整它的大小，另一个使用CSS：

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);">
</canvas><canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur 1按其应有的方式显示，但不显示compteur 2。内容是在300x300画布上使用JavaScript绘制的。

为什么会有显示差异？

Answer 1

设置width和height你需要，你可以用canvasObject.setAttribute('width', '475');

Answer 2

为<canvas>元素的css规则。width和height设置要绘制到页面的画布元素的实际大小。另一方面，width和height设置画布API将使用的坐标系统或“网格”的大小。例如，考虑以下(小提琴):var ctx = document.getElementById('canvas1').getContext('2d');ctx.fillStyle = "red";ctx.fillRect(10, 10, 30, 30);var ctx2 = document.getElementById('canvas2').getContext('2d');ctx2.fillStyle = "red";ctx2.fillRect(10, 10, 30, 30);canvas {&nbsp; border: 1px solid black;}<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas><canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>它们都有相同的内容，相对于Canvas元素的内部坐标。但是在第二个画布中，红色矩形的宽度将是原来的两倍，因为CSS规则将画布作为一个整体延伸到一个更大的区域。注：如果CSS规则适用于width和/或height则浏览器将使用HTML属性来调整元素的大小，使这些值的一个单位等于页面上的1px。如果未指定这些属性，则它们将默认为width的300和一个height的150.