画布在使用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 {

  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.