日期:2014-05-17  浏览次数:20564 次

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>