使用CSS时canvas拉伸，但使用“宽度”/“高度”属性正常
我有2个canvas，一个使用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>
Compteur1显示它应该，但不compteur2。 内容在300×300的canvas上使用JavaScript绘制。
为什么有显示差异？
看起来width和height属性决定了canvas坐标系统的宽度或高度，而CSS属性只是决定了canvas的大小。
这在http://www.whatwg.org/html#attr-canvas-width （需要JS）或http://www.whatwg.org/c#attr-canvas-width （可能会吃掉你的电脑） ：
canvas元素有两个属性来控制元素位图的大小：width和height。 这些属性在指定时必须具有有效的非负整数值。 必须使用parsing非负整数的规则来获取它们的数值。 如果某个属性缺失，或者parsing其值时返回错误，则必须使用默认值。width属性默认为300，height属性默认为150。
要设置你需要的width和height ，你可以使用
canvasObject.setAttribute('width', '475');
对于<canvas>元素， width和height的CSS规则设置了将被绘制到页面的canvas元素的实际大小。 另一方面， width和height的HTML属性设置canvasAPI将使用的坐标系或“网格”的大小。
例如，考虑这个（ 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);
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>
如果在CSS中设置宽度和高度，canvas将被拉伸。 如果你想dynamic地操作canvas的尺寸，你必须像这样使用JavaScript：
canvas = document.getElementById('canv'); canvas.setAttribute('width', '438'); canvas.setAttribute('height', '462');
浏览器使用CSS宽度和高度，但是canvas元素根据canvas宽度和高度进行缩放。 在JavaScript中，阅读CSS的宽度和高度，并设置canvas的宽度和高度。
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')))
如果您想要基于CSS媒体查询的dynamic行为，请勿使用canvas宽度和高度属性。 使用CSS规则，然后在获取canvas渲染上下文之前，将宽度和高度属性分配给CSS宽度和高度样式：
var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ...
