画布不能画一个正方形？

Question

    <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>  

结果：

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

Answer 1

问题是画布的style属性。

使用style属性设置画布的大小将导致缩放问题。 发生这种情况会导致canvas元素具有默认大小。如果您使用css设置大小，则它与该大小不同=＆gt;扩展问题。你可以发出警报（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>  

Answer 2

你可以将宽度和高度作为画布的属性 看看http://jsfiddle.net/Fedor/xZGUj/3/

我想，属性width和height初始化坐标系洞察画布。 css属性仅限制画布的大小。所以当你没有指定宽度和heihgt时，你会得到宽度= 300和高度= 150的坐标系统。您可以在http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

找到此信息

所以，如果你在你的小提琴中把高度放在css 150 ... squre将是squre：）