我有2个画布，一个使用HTML属性宽度和高度来调整它的大小，另一个使用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>
Compteur1正常显示，但compteur2不正常。内容使用JavaScript在300x300的画布上绘制。
为什么会有显示差异?
当前回答
Canvas通过缓冲区渲染图像，因此当你指定HTML属性的宽度和高度时，缓冲区的大小和长度会发生变化，但当你使用css时，缓冲区的大小是不变的。使图像拉伸。
使用html调整大小。
画布大小改变->缓冲区大小改变->渲染
使用css调整大小
画布的大小被改变->渲染
由于缓冲区长度保持不变，当上下文渲染图像时， 图像显示在调整大小的画布(但渲染在不变的缓冲区)。
其他回答
Shannimal校正
var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
对于<canvas>元素，宽度和高度的CSS规则设置将绘制到页面的canvas元素的实际大小。另一方面，宽度和高度的HTML属性设置了画布API将使用的坐标系统或“网格”的大小。
例如，考虑这个(jsfiddle):
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); 帆布{ 边框:1px纯黑色; ｝ < span style=" font - family:宋体;" Height ="50" width="100"></canvas> . < span style=" font - family:宋体;" Height ="50" width="100"></canvas> .
相对于canvas元素的内部坐标，两者都有相同的东西被画在上面。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为根据CSS规则，整个画布将被拉伸到更大的区域。
注意:如果CSS的宽度和/或高度规则没有指定，那么浏览器将使用HTML属性来调整元素的大小，使这些值的1个单位等于页面上的1px。如果没有指定这些属性，则默认宽度为300，高度为150。
如果你想要一个动态的行为，例如CSS媒体查询，不要使用画布的宽度和高度属性。使用CSS规则，然后，在获得画布渲染上下文之前，为width和height属性分配CSS width和height样式:
var elem = document.getElementById("mycanvas");
elem.width = elem.style.width;
elem.height = elem.style.height;
var ctx1 = elem.getContext("2d");
...
如果你在CSS中设置了宽度和高度，画布将被拉伸。如果你想动态地操纵画布的尺寸，你必须像这样使用JavaScript:
canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
要在画布上设置宽度和高度，您可以使用:
canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');
