带你快速玩转canvas（3）贴个图片，写点字

5. 将图片绘制到画布之上

解释：

1. 简单来说，就是将一张图的某个区域，画到画布上的某个区域；
2. 和ctx.fillStyle = pattern不同的是，pattern是将图片作为背景，该背景位置是固定的，画图只是显示那背景某个区域；
3. 而本方法画图是取图的全部/一部分（比如400x400的，取他(x:200,y:250,width:50,height:100)区域的图；
4. 然后放在画图的某个指定区域（如坐标x:100,y:200处），也可以缩放图片大小（比如变为width:300,height:200）；
5. 运用场景示例：有一个人物八方向四帧动作图，在一个png图上，可以根据需要，只取其中一个，然后绘制到画布区域之中；

ctx.drawImage(image, dx, dy)

1. 将图片完整绘制在画布的x, y坐标处；
2. x, y是图片绘制时，其左上角位于画布的坐标，参数类型是Number（不是有px的字符串类型）；
3. 不会对图片进行缩放（即保持图片本身大小）；
4. image是图片HTML元素，例如通过document.getElementById()获取的HTML的image元素，或者是在JS中，通过new Image()创建的图片元素；
5. 需要小心一件事，图片在创建后，并不会立刻从服务器下载完成，因此假如图片是后续加载的话，务必要等图片onload事件触发后，再进行绘图；
6. 应对办法：提前将图片下载好，这样绘制的时候就不必担心图片未加载完成的问题了。

ctx.drawImage(image, dx, dy, dWidth, dHeight)

1. 将图片绘制在画布的x, y坐标处；
2. 本方法在上一个方法的基础上，增加了缩放功能，dWidth和dHeight表示绘制到画布上时，画布上图片的宽高；
3. 具体来说，假如一个图片是100*100，dWith和dHeight是200*200，就相当于将图片缩放了200%；

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

1. 取出图片的某个区域，然后绘制到画布的某个区域；
2. dx, dy, dWidth, dHeight和上面2个API表示的内容是一样的；
3. sx表示图片（即image）取图时的x坐标，sy表示y坐标，sWidth表示从sx开始取的图片的宽度，sHeight表示从sy开始，取的图片的高度；
4. 示例：假如image的宽高是200*200，这四个参数的值依次是50,50,100,100的话，表示取图片x:50, y:50到x:150, y:150这个范围的区域；
5. sWidth + sx的值或者sHeight + sy的值可以大于图片本身的宽高，在缩放时，会将超出部分计算在内进行缩放，超出部分视为透明，不会染色；
6. sWidth和sHeight可以是负数，有效，计算时同样相加即可，同样可以框住一个矩形区域。

DEMO源代码：
https://github.com/qq20004604/some_demo/blob/master/canvas/%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87.html

点击直接查看DEMO（在github上）

6. 写文字

解释：

1. 可以绘制空心文字或者实心文字；
2. 在绘制前可以定义三种属性：
3. 定义完属性（或使用默认的）后，绘制文字到画布上。

ctx.font

1. 字体和字体大小，类型是字符串。
2. 和font-family类似，只不过多了一个字体大小的设置。
3. 示例："Bold 10px Arial"先取Bold字体，如果没有则取Arial字体。字体大小取12px.

ctx.textAlign

1. 字体对其方式，类型是字符串；
2. 取值有left, center, right三种。
3. 相对于绘制时的坐标，决定文字的排版方式。
4. 绘制时的坐标，位于文字的下方。即假如是左对齐，绘制时的坐标是文字的左下角的坐标。

ctx.fillStyle

1. 实心文字的颜色，就像普通写颜色css属性那样写；

ctx.strokeStyle

1. 空心文字的颜色；

ctx.fillText(text, x, y [, maxWidth])

1. 填充实心文字；
2. x，y表示写文字时，基准位置的坐标点。左对齐是文字左下，居中是文字中间下方，右对齐是文字右下；
3. maxWidth可以不加，加的话，会压缩文字的宽度（高度不会变化），而不是超出部分不显示；

strokeText(text, x, y [, maxWidth])

1. 填充空心文字（需要字体支持）；
2. 其他和上面没区别；