我有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的画布上绘制。
为什么会有显示差异?
当前回答
Shannimal校正
var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
其他回答
CSS设置画布元素的宽度和高度，因此它会影响坐标空间，使所有内容都倾斜绘制
下面是我如何用Vanilla JavaScript设置宽度和高度的方法
canvas.width = numberForWidth
canvas.height = numberForHeight
如果你在CSS中设置了宽度和高度，画布将被拉伸。如果你想动态地操纵画布的尺寸，你必须像这样使用JavaScript:
canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
Canvas通过缓冲区渲染图像，因此当你指定HTML属性的宽度和高度时，缓冲区的大小和长度会发生变化，但当你使用css时，缓冲区的大小是不变的。使图像拉伸。
使用html调整大小。
画布大小改变->缓冲区大小改变->渲染
使用css调整大小
画布的大小被改变->渲染
由于缓冲区长度保持不变，当上下文渲染图像时， 图像显示在调整大小的画布(但渲染在不变的缓冲区)。
浏览器使用css的宽度和高度，但canvas元素根据画布的宽度和高度缩放。在javascript中，读取css的宽度和高度，并设置画布的宽度和高度。
var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
Shannimal校正
var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
