HTML5 Canvas 画布的一个问题

在学习HTML5 中的 Canvas的时候,
我发现画布中画出的线条也好还是实体的圆也好.总是高比宽大一倍.也就是说你想画一个正方形,x就必须是y的两倍才行.这个还是可以控制的,但是画线的时候呢.横线是的线条宽度竟然是竖线宽度的两倍还有画圆的时候也是这样.

FF和Chrome我都试过了.都是这个样子.他们的版本都是新下载的.我看网上的教程也都没有做过特殊处理.为什么我的例子会出现这种情况呢?

http://html5.lcc.me 
进入这个示例网页后,点击画布的例子就可以了. 如果在你们的浏览器上面显示是正常的话.也麻烦告诉一声.右击页面就可以看到源代码了.

小弟先谢谢了

是你屏幕分辨率的问题吧，没设好。正常的话根本不会这样。

你可以打开系统带的画图板画个矩形框看看是什么效果。

试了你的代码几次，终于发现问题

是你没有设置画布的宽度和高度，在默认情况下，宽度和高度的比例是2：1，所以你才看到那样的效果
而你设置的是style="width:300px; height:300px"，这个设置好像仅仅把画布拉伸了。

正确的设置画布的宽度和高度是这样的
HTML code

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>