canvas用途
- 游戏 小游戏
- 图表 报表 如 Charts插件
- 炫酷效果 banner
- 模拟器、图形编辑器 等
兼容性
IE9以上和其他浏览器
canvas 标签
属性
- width
- height
方法
- getContext() 参数 2d/webgl
注意
css设置的宽高跟width/height设置的宽高 不同
Context环境
通过 getContext方法获取绘图环境（绘图上下文）（对象）
绘制图形通过该对象提供的方法/属性
基本绘图
路径
- moveTo() 起始位置
- lineTo() 直线 ，如果没有moveTo() 第一个lineTo()替代 moveTo()
路径的开始和关闭
- beginPath() 开启路径
- closePath() 关闭路径 结束当前的路径，自动闭合
- 注意： 复杂的图形，一定要开启和关闭路径
描边 stroke()
- stroke() 方法
- strokeStyle 设置描边颜色
- lineWidth 设置描边的粗细
填充
- fill() 填充
- fillStyle 设置填充颜色
快速矩形工具
- rect(x, y, width, height) 绘制矩形路径
- strokeRect(x, y, width, height) 描边矩形
- fillRect(x,y,width,height) 填充矩形
- clearRect(x,y,w,h) 清除矩形 （矩形范围内的内容会被擦除）
圆形(圆弧)
- arc(x,y,r,start, end, wise) 绘制圆弧
- start/end是起始位置 单位是 弧度 ， 360角度 = 2PI， 180角度 = PI
- 最后一个参数 顺时针(false)/逆时针(true) 默认false
内容
文字方法
- strokeText(text, x, y) 描边写字
- fillText(text, x, y) 填充写字
- measureText(text) 返回对象 包换文本的宽度
- font 属性 设置 大小、字体 如
cxt.fon="100px MicrosoftYaHei"; - textAlign 属性 水平对齐方式 start(默认)/end/center/left/right
- textBaseline 属性 垂直对齐方式 alphabetic(默认)/top/bottom/middke/hanging/ideographic
绘制图片（插入图片）
插入图片
drawImage(img, x, y)
- img image的dom元素
- x,y 插入到 画布的位置 坐标
插入图片并改变大小
drawImage(img, x, y, width, height)
插入裁剪后的图片
drawImage(img, sx,sy,swidth,sheight, x, y, width, height)
- sx/sy: 图片上开始裁剪的位置
- swidth/sheight : 裁剪图片的大小
阴影
- shadowColor 阴影颜色
- shadowBlur 阴影的模糊值
- shadowOffsetX 阴影的左偏移量
- shadowOffsetY 阴影的右偏移量
渐变
线性渐变
var grd = cxt.createLinearGradien(x, y, x1, y1);
//参数：x,y起始坐标，x1,y1结束坐标
例如：
//创建线性渐变的对象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点，把渐变设置到 填充的样式
径向渐变
- createRadiaGradient(x1, y1, r1, x2, y2, r2)
- addColorStop()
把背景图片作为填充
- createPattern(imgDom, repeate)
- 第二个参数 repeate/ repeat-x / repeat-y / no-repeat
变换
缩放
- sacle(x, y)
位移
- translate(x, y)
旋转
- rotate(angle)
环境的保存和恢复
- save()
- restore()
设置透明
- globalAlpha = number 设置不透明度
- 全局设置是对整个画布（绘图环境） 进行设置
限定绘图区域
- clip()
输出base64编码
- canvas.toDataURL(type, encoder)
- type为mime类型 image/jpeg image/gif image/png image/webp
画布渲染画布
把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段
设置线条
- lineCap 属性 设置线条两端的形状 butt/round/square
- lineJoin 属性 设置线条夹角 miter/bevel/round
- miterLimit 属性 设置夹角斜角的最大长度 一般默认 10
