使用CSS时画布被拉伸,但是"宽度"/"高度"属性正常
Sir*_*ber 181 css height html5 canvas width
我有2个画布,一个使用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.内容使用300x300画布上的JavaScript绘制.
为什么会有显示差异？
Sam*_*amB 204
看起来,width和height属性决定了画布坐标系的宽度或高度,而CSS属性只决定了它将在其中显示的框的大小.
这可以在http://www.whatwg.org/html#attr-canvas-width(需要JS)或http://www.whatwg.org/c#attr-canvas-width(可能会吃掉你的电脑)中解释:
该
canvas元素有两个属性来控制元素位图的大小:width和height.指定时,这些属性必须具有有效的非负整数值.必须使用解析非负整数的规则来获取它们的数值.如果缺少某个属性,或者解析其值会返回错误,则必须使用默认值.该width属性默认为300,height属性默认为150.
- 确实..我一直认为在最近的html版本中不推荐使用像"width"和"height"这样的直接属性. (10认同)
- 哦,显然它实际上在http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width(## attr-帆布width`).麻烦的是我之前点击了错误的`width`而转到`#dom-canvas-width`部分.提起http://www.w3.org/Bugs/Public/show_bug.cgi?id=9469. (4认同)
- 拥有看起来像但与另一个(css宽度,高度)根本不同的API.哇. (3认同)
- 当您希望内部坐标系不同时，区分这些很重要。（即用于视网膜显示器或 8 位风格的游戏） (3认同)
- 这实在令人困惑。我们尝试在 css 中设置宽度和高度。我们花了两天时间才找出关于宽度和高度的两种不同解释。只是哇... (3认同)
小智 38
要设置width和height你需要,你可以使用
canvasObject.setAttribute('width', '475');
- 如果我希望我的画布具有相对大小怎么办？也就是说,如何模仿`width:100%;`css属性？ (9认同)
- +1`el.setAttribute('width',parseInt($ el.css('width')))`做了诀窍,谢谢 (6认同)
- 使用[getComputedStyle](https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle)的纯JavaScript(不带jQuery)版本:`canvas.setAttribute('width',window.getComputedStyle(canvas,空).getPropertyValue( "宽度"));`.重复高度. (3认同)
- 很好的答案，但也不要忘记添加 canvasObject.setAttribute('height', '123') ！ (2认同)
- 我认为您不需要使用 .setAttribute() 我一直使用 .width 和 .height 属性 (2认同)
Ben*_*son 23
对于<canvas>元素,CSS规则width和height设置将绘制到页面的canvas元素的实际大小.另一方面,HTML属性width和height设置画布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>两者都相对于canvas元素的内部坐标绘制了相同的东西.但是在第二个画布中,红色矩形的宽度是原来的两倍,因为整个画布被CSS规则拉伸到更大的区域.
注意:如果指定width和/或未height指定CSS规则,则浏览器将使用HTML属性来调整元素的大小,使得这些值的1个单位等于页面上的1px.如果未指定这些属性,然后他们将默认为width中300和height的150.
- 很清楚的描述发生了什么! (3认同)
小智 15
如果在CSS中设置宽度和高度,画布将被拉伸.如果要动态操作画布的尺寸,则必须使用JavaScript,如下所示:
canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
小智 5
浏览器使用CSS的宽度和高度，但是canvas元素根据画布的宽度和高度缩放。在javascript中，读取CSS的宽度和高度，并将画布的宽度和高度设置为该高度。
var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();