初识canvas
要学习canvas，必先知道canvas为何物？
首先canvas只是html5中的一个便签而已，表示的意思是一个画布，它本身没有任何作用，就相当于是一个画板，你可以在它上面画任何你想画的东西，那如果我们不给它设置任何的属性和样式，它的默认状态是什么呢？运行上面的代码可得如下：
默认的宽度为300px，高度为150px，当body背景为白色时，它的背景为白色，body背景为灰色时，它的背景为灰色，可知它的默认背景为透明色
在它后面加一个内联样式的标签，看看它是什么类型的标签
span到它的右侧去了，说明它是一个行内元素，好了，基本情况我们算了解了，那我们怎么修改它的默认样式呢？
首先，canvas作为一个html5比较特殊的标签，也是支持样式控制的，比如设置边框，边距，背景等等，但是有一个地方值得注意的是，在设置canvas宽高时，如果用style样式来设置的话，会出现一点小问题，具体什么问题，暂且卖个关子，后面为大家介绍，所以宽高还是在标签上设置比较好
当然，canvas目前只是一个画板而已，没有画笔，你什么也做不了，那画笔是什么呢，这里就是我们主角的开始了
getContext（"2d"）是canvas的绘图环境，只有引入它才能进行绘图
有时我在想，canvas绘图都是在js里面完成的，那么它本身的标签能不能写东西呢，比如，如果在它里面放一张图片，嘻嘻，会怎么样，那我们说干就干
当当当当，见证奇迹！马丹，标准浏览器下，什么都没有，看看不争气的IE，亮瞎眼，活脱脱一个大美女出现了
由此可见，在支持canvas的浏览器，canvas里面的东西是不会显示的，但是在不支持的情况下，会赤裸裸的显示出来，于是，我们可以把它作为提示用语，用来告诉不支持的浏览器，该换换了
恩，对于IE家族的低版本成员，年纪太大，只能这么处理了，如果你非要支持IE，可以试试explorercanvas开源项目，里面有一个excanvas.js，当然，在使用的时候注明是在ie下引用，地址我就没给了，我也没打算去研究它，因为我断定，不久的将来，IE8以下浏览器就不见了，呵呵，但愿它快点到来！
前面都是聊骚，正在的主角才刚开始，任务艰巨，任重而道远啊，canvas API分为属性部分和方法部分，但是我不想这么来讲，这样太机械了，看不懂的人依旧是看不懂，接下来的API我会采用相关属性，方法交叉讲解，再辅以小实例，相信这样更让人看得懂，而且会印象深刻，想想还有点小激动呢，API较长，只能分几期来讲了！
由于canvas默认背景为透明色，为区别画布与body，以后的画布样式统一设置为如下：
画画嘛，都是从点，线，圆，框开始的，那我们就从点开始吧！
MoveTo（x,y） 顾名思义，就是移动到某个坐标点上，x,y 分别表示x轴坐标和y轴坐标
当然是不会有任何的效果的，因为这里的意思就相当于把笔移动了100,100的位置，还没有下笔呢，这并不是然并卵，这个是画笔作画的起点，比如画直线，2点一线，只需再做一点就可以画直线了
lineTo（x,y） 意思是连接最后一点的坐标，但是不画，x,y 分别表示x轴坐标和y轴坐标
然而并没有任何效果，这是为什么呢，实际上，上面只是标注了直线的起点和终点，还没添墨水呢，何为墨水呢？
下面就来介绍我们的黑白双煞：
fill（） 填充，此为实心的
stroke（） 绘制，此为空心的
因为线条的宽度只有一个像素，所以无法进行填充，于是画线段用fill（）方法是没有用的，
结果：
此黑白双煞在以后的绘图中起到核心作用，切记这2个方法（为什么我叫它们黑白双煞呢，因为canvas默认颜色为黑色，fill（）填充颜色为一坨黑，stroke（）绘制就像描边一样，一个框，里面是透明的，由此得名，哈哈，方便记忆）。
点，线之后便是面了，我们来绘制矩形吧，矩形也有三兄弟，暂且命名为阮氏三兄弟：
rect（x,y,w,h） 在x,y坐标点绘制一个矩形，宽高为w,h，此方法只是绘制路径，必须用黑白双煞才能显示
fillRect（x,y,w,h） 在x,y坐标点绘制一个填充矩形，宽高为w,h
strokeRect（x,y,w,h） 在x,y坐标点绘制一个描边矩形，宽高为w,h
分别看看它们的表现
为了便于演示，我将画布缩小到（120*120），以上为各个组合的表现，从这些表现可以总结一下几点：
1、rect（）不能单独使用，必须借助fill（），stroke（）方法；
2、rect（）+stroke（） 组合的效果和strokeRect（）一致，可等价
3、rect（）+fill（） 组合的效果和fillRect（）一致，可等价
这里还有一个小细节需要注意的是，我这个的坐标写的是5.5而不是6或5，为什么？理论上绘制的线框是一个1像素的宽度的，因为一个点就是一像素，当坐标设为（6,6）时，表现会是如下：
对比上图明显粗一些，明显是2个像素的宽度，这是为什么呢？给大家画一个图
这3条线分别是5像素，6像素，7像素位置，图形绘制时，绘制6像素的地方向左绘制0.5像素，向右绘制0.5像素，但是浏览器实际上是不纯在半个像素的，所以浏览器会帮我们补上个半个像素，就成了2个像素了，如果要做成1像素边框，只需将坐标左移或右移半个像素，即0.5px，如果要精确绘图，须知这一点细节！
矩形之后就可以画圆了，但是圆相对来说比较复杂，咱们还是先来练练字，谢谢书法，哈哈，看看canvas编辑文字有哪些方法：
我们说画布上的图形皆为路径，所以，文字作为另一种图形，也存在黑白双煞：
fillText（text,x,y,[maxWidth]）; 顾名思义，这是填充文字
strokeText（text,x,y,[maxWidth]）; 顾名思义，这是描边文字
参数：
text ：需要绘制的文字
x,y: 文字绘制的起始坐标
[maxWidth] ： 文字的最大宽度，选填
咋一看，你会说，咦，怎么描边文字看上去像是加粗的啊，为什么会这样呢？在此稍作悬念，下面揭晓！
我们看一下文字的默认表现：
结果简直让人大吃一精，哎，是惊！文字怎么跑那里去了，了解css 的都知道，文字是有基准线的，这玩意也是老外的英文搞出来的，html文字基准线是baseline，可以用vertical-align来修改基准线，canvas有吗？哈哈，还真有：
textBaseline
参数：
alphabetic ： 默认。文本基线是普通的字母基线。
top ： 文本基线是 em 方框的顶端。
hanging ： 文本基线是悬挂基线。
middle ：文本基线是 em 方框的正中。
ideographic ： 文本基线是表意基线。
bottom ：文本基线是 em 方框的底端。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery