<style>
canvas{width:300px; height:300px; border:2px solid red;}
</style>
<canvas id="draw"></canvas>
<script>
var c = document.getElementById("draw");
var ctx = c.getContext("2d");
//画150*150的正方形
ctx.fillRect(10,10,150,150);
</script>
最后得到的效果如下：
我就奇怪了，明明画的是正方形，怎么出来了是长方形？难道被压缩了。然后，我把代码改了，将 canvas 的style样式定义的宽高，用它的html属性的宽高来定义，如下：
<style>
canvas{ border:2px solid red;}
</style>
<!--将宽高定义在了这里，不放在style里面-->
<canvas id="draw" width=300 height=300px></canvas>
<script>
var c = document.getElementById("draw");
var ctx = c.getContext("2d");
//画150*150的正方形
ctx.fillRect(10,10,150,150);
</script>
运行后，正常了：
百度了下，发现是这么说的：
当你在支持html5 canvas的浏览器下查看页面的时候，你会看到一个大小为300px*300px（BTW：canvas默认大小为：300px*150pxcanvas）相当于一张图片，css设置的属性相当于对这张图片进行拉伸变化。
要改变canvas的大小，应当用这种方式：
使用js来改变
<canvas width=500 height=400></canvas>对应的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;
换句话说，你现在画出的圆实际显示的是在默认大小上经过拉伸变换的样子。以后，定义画布大小，还是用html属性来定义。