Canvas 实现图片马赛克

　　1、 getContext(contextID) ---返回一个用于在画布上绘图的环境

　　2、drawImage

　　3、 getImageData(x, y, width, height) ---获取矩形区域的图像信息

　　4、beginPath() ---开始一条路径，或重置当前的路径

　　5、rect(x, y, width, height) ---绘制矩形

　　6、lineWidth ---设置或返回当前线条的宽度

　　7、fillStyle ---设置或返回用于填充绘画的颜色、渐变或模式

　　8、strokeStyle ---设置或返回用于笔触的颜色、渐变或模式

　　9、globalAlpha ---设置或返回绘图的当前透明值

　　10、fill() ---填充当前的图像（路径）。默认颜色是黑色

　　【注】如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

　　11、stroke() ---会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

　　12、toDataURL(type, encoderOptions) ---导出图片，type为图片类型， encoderOptions图片质量，[0, 1]

　　简化 canvas 编写的库，为 canvas 提供所缺少的对象模型

　　1）在 canvas 上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）

　　2）给图形填充渐变颜色

　　3）组合图形（包括组合图形、图形文字、图片等）

　　4）设置图形动画集用户交互

　　5）生成 JSON, SVG 数据等

　　1、声明画布

　　2、插入图片

　　3、设置背景图片 setBackgroundImage

　　4、renderAll() 重新绘制

　　5、on() 电影蜜蜂 用户交互

　　6、getPointer()

　　7、setWidth()、setHeight() 设置canvas的宽高

　　8、画矩形

　　9、add(obj) 添加图形

　　10、remove(obj) 移除图形

　　11、set() 设置对象内容

　　12、toDataURL(obj)

　　学习 fabric.js

　　API 文档：http://fabricjs.com/docs/index.html相关文章：http://blog.csdn.net/mnhn456/article/details/76869672，https://segmentfault.com/a/1190000004864237

　　在线实例：https://www.wenjiangs.com/runcode?slug=Cqz0q1qh

　　举报/反馈