html5提供了一个<canvas>标签，结合javascript的canvas api接口可以用来绘制图形和动画。最近工作中涉及到画图的任务，下面来了解一下canvas的基础：canvas画布。
1，canvas（画布）的width和height
上面的代码中放置了两个canvas画布，一副图片，可以看到canvas标签和img标签一样都是内联元素，canvas也有width和height属性，可以指定它的宽高，如果不指定默认为300x150。
这里需要注意的是，如果用css样式来指定canvas标签的宽高，那么canvas画布中的图形在渲染时进行相应的缩放（变形）以适应标签的宽高，所以不要用css样式来指定画布的宽高，而是显示的通过设置canvas的width和height来指定画布的宽高。
canvas默认被栅格（网格）覆盖，一般来说（画布没有被压缩或拉伸）一个网格代表canvas中的一个像素。二维的canvas画布有一个原点，默认的位置位于画布的左上角：
这和数学中常用的直角坐标系略有不同，它的y轴正方向是朝下的，这同时也影响了画布中象限角的分布，30度位于x轴的下方而不是上方，在画图时需要注意。不过canvas画布是可以旋转的，而且原点也是可以移动的。
参考：
Canvas教程
<canvas>标签
相关文章
精彩导读
热门资讯
关注我们
