HTML5 canvas 的一些属性

canvas 是一个标签, 使用跟 div 之类的没啥区别. 在 js 里你也可以通过 document.getElementById 等方法来获得它.

canvas 有两个方法:

• getContext(contextId) : 获得 canvas 的 context (上下文), 上下文不好理解, 形象点说, canvas 是一张绘图纸, 那 context 就是画笔. contextId 是画笔类型, 现在基本上只有 “2d” 这一个, 就是只能花 2D 平面的图形, 已经有浏览器支持更牛的 3D 类型, 比如 “webgl” , 那个太高端了, 我还没研究过…
• toDataURL(type, args…) : 将当前 canvas 里的内容导出成图片数据, 结果是一个以 “data:” 开头的字符串, 实际上是图片的像素数据… 把这个贴到 img 标签的 src 里, 就能看见图片了. type 是导出的 mime 类型, 比如 “image/jpeg” , “image/png” , “image/svg+xml” … 至于支持那些个 mime 类型跟浏览器有关 , 默认是 “image/png”.

Context(2D)

context 是这篇博文的主要内容, 包含了大量的绘制方法.

这些方法可以分成几大类:

状态(state)

绘制状态其实是保存你设置的一些绘制属性的栈, 这些属性包括 : transformation matrix, clipping region, fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline.

通常在绘制前, 应该先保存当前绘制状态, 在绘制完成后恢复原始状态.

• save() : 保存当前的绘制状态
• restore() : 恢复到前一个状态

变换(Transformations)

变换其实就是平面几何里的矩阵变换, 通过变换可以实现缩放, 平移, 倾斜, 旋转等复杂的效果.

• rotate(angel) : 旋转, angel 是要旋转的弧度
• scale(x, y) : 缩放, x y 是要缩放的比例
• translate(x, y) : 平移, x y 是要平移的距离
• setTransform(m11, m12, m21, m22, dx, dy) : 设置当前的变换矩阵为参数里的数据
• transform(m11, m12, m21, m22, dx, dy) : 将当前的变换矩阵乘以参数里的数据获得新的变换矩阵

转自：http://www.90focus.com/post/HTML5canvas.html