在学习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>