Canvas的概述
定义
<canvas>是H5新增的标签- canvas提供给了 javascript 绘图接口
- canvas绘图建立在坐标系上
应用领域
- 炫酷特效、banner
- 可视化数据（图表）
- 游戏
- 大型应用（地图）
- 在线系统 （在线PS ）
canvas标签
- 属性 width
- 属性 height
- 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境
绘图环境
- 该对象提供API，让JavaScript来绘制图形
绘图基础
路径的开启和闭合
- beginPath() 开启路径
- closePath() 关闭路径 （把路径闭合）
设置起点
- moveTo(x, y)
画线
- lineTo(x , y) 绘制直线
描边
- lineWidth 属性 设置描边线的粗细
- strokeStyle 属性 设置描边颜色
- stroke() 绘制
填充
- fillStyle 属性 填充颜色
- fill() 执行填充
快速矩形
- rect(x, y, width, height) 绘制矩形路径
- strokeRect(x, y, width, height) 描边矩形
- fillStroke(x, y, width, height) 填充矩形
- clearRect(x, y, width. height) 清除矩形 （可以用来清除屏幕）
圆弧
- arc(x, y, radius, start, end, true/false) 圆弧路径
- start 表示开始的弧度（位置） 0弧度是三点钟方向
- end 表示结束的弧度（位置）
- 默认false 表示顺时针
绘制文字
- font 属性 设置文字的风格、大小、字体 值 同css的font属性
- textAlign 属性 文字水平对齐方式 (start/left/center/right/end)
- textBaseline 属性 文字的垂直对齐方式 (top/middel/bottom/alphabetic)
- strokeText(text, x, y) 描边字
- fillText(text, x, y) 填充字
- measureText(text) 返回对象 文字的宽度 取决于字体大小
绘制图片
- drawImage(img, x, y) 简单绘制图片
- drawImage(im, x, y, w, h) 绘制图片并指定在画布上的大小
- drawImage(im, sx, sy, sw, sh, x, y, w, h) 裁剪图片并把裁剪部分绘制到画布
- 其中 img是图片的dom对象， 配合onload事件
设置阴影
- shadowColor 阴影颜色
- shadowBlur 阴影模糊值
- shadowOffsetX 阴影x偏移量
- shadowOffsetY 阴影y偏移量
渐变
- createLinearGradient(x, y, x1, y1) 创建线性渐变
- createRadialGradient(cx1, cy1, r1, cx2, cy2, r2);
线条样式
- lineCap 属性 线条两端样式 butt/round/square
- lineJoin 属性 线条相交样式 miter/bevel/square
Cavnas 高级
变换--位移
- translate(x, y)
变换-缩放
- scale(xS, yS)
变换-旋转
- rotate(弧度)
环境的保存和释放
- save()
restore()
设置透明度
globalAlpha 属性 设置绘图环境的不透明度 值 0~1之间
限制绘图区域
- clip() 配合路径。 对绘图环境进行的限制
输入base64编码
- canvasEle.toDataURL()
画布渲染画布
- 使用 drawImage() 把canvas元素当做img元素
贝塞尔曲线
- bezierCurveTo()
绘制圆角
- arcTo(x1, y1, x2, y2, r);
Cavnas 第三方类库
常见的第三方类库
- konva.js
- chart.js 图表插件
- eccharts 图表插件(百度)
- tree.js (3d webgl 库)
第三方类库 Konva
Konva的结构
- 舞台 (stage)--> 层(layer) --> 图形
- Statge --> Layer ---> 分组 （--->分组---->） ---> 图形
Konva 绘制图形
- Konva.Rect
- Konva.Circle
- Konva.Wedge
- Konva.Line
- Konva.Star
- Konva.Image
- ......
来源：https://www.cnblogs.com/kyl-6/p/7875690.html