八、Canvas 文本
context 对象的文本绘制功能由这两个函数组成：
fillText(text, x,y,maxWidth)
strokeText(text, x,y,maxWidth):text 即指文本，x,y 是文本开始位置，maxWidth 用于限制字体大小，它会将文本字体强制收缩到指定尺寸。
相关函数：measureText() ,返回一个度量对象，其中包含了在当前 context 环境下指定文本的实际显示宽度。
文本呈现相关的 context 属性：
| font | css 字符串 | e.g.: italic Arial, scans-Serif |
|---|---|---|
| textAlign | start, end,left,right,center | 默认为 start |
| textBaseLine | top, hanging,middle,alphabetic,bottom,ideographic | 默认 alphabetic |
九、Canvas 阴影（内置 Canvas Shadow API）
阴影属性：
| 属性 | 值 | 备注 |
|---|---|---|
| shadowColor | 任何 css 中的颜色值 | 可以选用透明度（alpha） |
| shadowOffsetX | 像素值 | 值为正，向右移动阴影；值为负数，向左移动阴影 |
| shadowOffsetY | 像素值 | 值为下，向右移动阴影；值为负数，向上移动阴影 |
| shadowBlur | 高斯模糊值 | 值越大，阴影边缘线越模糊 |
十、像素数据
Canvas API 最有用的特性之一是允许开发人员直接访问 canvas 底层像素数据。该数据访问是双向的，一是可以以数值数组形式获取像素数据；二是可以修改数组的值以将其应用于 canvas.
主要用到 context API 内置的三个函数：
（1）context.getImageData(sx,sy,sw,sh)
这个函数返回当前 canvas 状态并以数值数组的方式显示。返回的对象包括三个属性：
| width | 每行有多少个像素 |
|---|---|
| height | 每列有多少个像素 |
| data | 一堆数组，存有以 canvas 获取的每个像素的 RGBA 值。（canvas 上的每个像素在这个数组中就变成了四个整数值，每个值都在 0~255 之间） |
若想获取所有像素数据，就需要这样传入参数：getImageData(0,0,canvas.width,canvas.height)
有大神总结了一个像素公式，前提是给定 canvas 的 width 和 height。（x,y）上的像素：
|红色|((widthy)+x)4|
|:----|:-----|:-----|
|绿色|((widthy)+x)4+1|
|蓝色|((widthy)+x)4+2|
|透明色|((widthy)+x)4+3|
（2） context.putImageData(imagedata,dx,dy)
putImageData 允许开发人员传入一组图像数据，其格式与最初从 canvas 上获取来的是一样的。dx,dy 参数可以用来指定偏移量。
（3）context.createImageData(sw,sh)
这个函数可以创建一组图像数据并绑定在 canvas 对象上。即可以预先生成一组空的 canvas 数据。
注意：还有一种方法可用于从 canvas 中获取数据：canvas.toDataUrl API 。借助它，能够通过编程来获取 Canvas 上当前呈现的数据，获得的数据以文本格式存在，这种格式是一种标准的数据表示方法，浏览器能将其解析成图像。
dataURL 是一个包含了图像数据（如 PNG）的字符串，浏览器会像显示普通图像文件一样显示图像数据。
十二、 Canvas 安全机制
origin-clean canvas: 即指如果 canvas 中的图片并非来自包含它的页面所在的域，页面中的脚本将不能取得其中的数据。
