细说 Canvas API（二）

八、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 中的图片并非来自包含它的页面所在的域，页面中的脚本将不能取得其中的数据。