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