画布无法画出正方形？

<canvas id="c" style="border: solid 1px black; width: 300px; height: 300px;"></canvas> 
    <script type="text/javascript"> 
     var canvas = document.getElementById("c"), 
     ctx = canvas.getContext("2d"); 
     ctx.fillRect(0, 0, 50, 50); 
    </script>

导致：
enter image description here 画布无法画出正方形？

小提琴：http://jsfiddle.net/wong2/xZGUj/

来源

2011-07-20 wong2

可能重复[drawImage方法在画布上在Firefox和其它问题，奇怪的纵横比（http://stackoverflow.com/questions/1931166/ drawimage-on-canvas-has-weird-aspect-in-firefox-and-other-problems） –

的问题是画布的样式属性。

使用style属性设置画布的大小将导致缩放问题。发生这种情况会导致canvas元素具有默认大小。如果您使用css设置大小，则它与该大小不同=>缩放问题。你可以警告（canvas.height），你会发现它有一个值，即使你没有设置。

如果更改为以下将工作：

<canvas id="c" width="100" height="100" style="border: solid 1px black;"></canvas> 
<script type="text/javascript"> 
    var canvas = document.getElementById("c"), 
    ctx = canvas.getContext("2d"); 
    ctx.fillRect(0, 0, 50, 50); 
</script>

的

来源

2011-07-20 06:36:11 dknaack

'使用style属性设置画布的大小将导致缩放问题“为什么？ – wong2

我改变了我的答案与解释。 – dknaack

它可以你应该把宽度和高度帆布检查的属性，这一点http://jsfiddle.net/Fedor/xZGUj/3/

我想，属性宽度和高度初始化坐标系视图画布。 CSS属性仅限制画布的大小。所以当你不指定宽度和heihgt时，默认情况下你将得到width = 300和height = 150的坐标系。您可能会发现此信息http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

所以，如果你在CSS 150的提琴把高度... squre将squre :)

来源

2011-07-20 06:36:00

它工作。但我想知道**为什么**？ – wong2

答案已更改 –

画布无法画出正方形？

回答

相关问题