画布在使用CSS时被拉伸，但使用"width“/ "height”属性是正常的
画布在使用CSS时被拉伸，但使用"width“/ "height”属性是正常的
提问于 2010-04-07 04:45:34
我有两个画布，一个使用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。内容是使用JavaScript在300x300的画布上绘制的。
为什么会有显示差异？
回答 6
Stack Overflow用户
发布于 2011-03-16 13:41:38
要设置所需的width和height，您可以使用
canvasObject.setAttribute('width', '475');Stack Overflow用户
发布于 2013-09-29 22:41:51
对于<canvas>元素，width和height的CSS规则设置将绘制到页面的画布元素的实际大小。另一方面，width和height的属性设置canvas 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);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规则将画布作为一个整体延伸到更大的区域。
注意:如果没有指定width和/或height的CSS规则，那么浏览器将使用HTML属性来调整元素的大小，使这些值中的1个单位等于页面上的1px。如果未指定这些属性，则它们将缺省为300的width和150的height。
Stack Overflow用户
发布于 2013-01-22 17:48:36
如果在CSS中设置宽度和高度，画布将被拉伸。如果您想要动态操作画布的尺寸，则必须使用JavaScript，如下所示：
canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2588181
复制相关文章
相似问题
腾讯云开发者
