画布不能画一个正方形？

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设置大小,则与该大小=>缩放问题不同.你可以发出警报(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>