canvas学习
线段
ctx.moveTo(x, y); 移动到 x，y坐标点 ctx.lineTo(x, y); 从当前点绘制直线到x，y点 ctx.stroke(); 描边 ctx.lineWidth = 20; 设置线段宽度 ctx.closePath(); 闭合当前路径 和回到起始点的区别 ctx.fill(); 填充
矩形
ctx.rect(x, y, width height); // 创建矩形 ctx.fillRect(x, y, width, height); // 绘制“被填充”的矩形 ctx.strokeRect(x, y, w, h); // 绘制矩形（无填充）
弧形
圆
扇形
圆角矩形
贝塞尔曲线
context.quadraticCurveTo(cpx,cpy,x,y); // cpx,cpy控制点 x,y 结束点
坐标轴转换
translate(dx, dy) 重新映射画布上的 (0,0) 位置scale(sx, sy) 缩放当前绘图rotate(Math.PI) 旋转当前的绘图save() restore() 应用场景 在变换之前保存 画下一个图形的时候 释放出来使用正常的轴 保存当前图像状态的一份拷贝 从栈中弹出存储的图形状态并恢复setTransform(a, b, c, d, e, f) 先重置再变换 参数：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动transform(a, b, c, d, e, f) 在之前的基础上变换
填充图案
渐变
线性渐变
context.createLinearGradient(x0,y0,x1,y1); x0,y0 开始坐标 x1,y1 结束坐标
径向渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1); x0 渐变的开始圆的 x 坐标 y0 渐变的开始圆的 y 坐标 r0 开始圆的半径 x1 渐变的结束圆的 x 坐标 y1 渐变的结束圆的 y 坐标 r1 结束圆的半径
阴影
ctx.shadowColor 设置或返回用于阴影的颜色 ctx.shadowOffsetX 设置或返回阴影距形状的水平距离 ctx.shadowOffsetY 设置或返回阴影距形状的垂直距离 ctx.shadowBlur 设置或返回用于阴影的模糊级别
文本
线段
lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度 ctx.miterLimit; 当lineJoin是miter时，用于控制斜接部分的长度 如果斜接长度超过 miterLimit 的值，变成bevel
裁剪
clip() 方法从原始画布中剪切任意形状和尺寸。 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
合成
定义和用法 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 源图像 = 您打算放置到画布上的绘图。 目标图像 = 您已经放置在画布上的绘图。
值描述source-over默认。在目标图像上显示源图像。source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。destination-over在源图像上方显示目标图像。destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。lighter显示源图像 + 目标图像。copy显示源图像。忽略目标图像。xor使用异或操作对源图像与目标图像进行组合。
全局透明图
ctx.globalAlpha = 0.5 // 设置全局透明度
图像绘制
drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。 https://www.w3school.com.cn/tags/canvas_drawimage.asp
canvas导出
canvas.toDataURL() ; 是canvas自身的方法不是上下文对象将canvas的内容抽取成⼀张图片, base64编码格式 注：同源策略略的限制将canvas的内容放入img元素里 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
像素操作 获取canvas像素信息
方法 描述 createImageData() 创建新的、空白的 ImageData 对象 getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 // 同源策略 putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上
命中检测
ctx.isPointInPath(x, y)；检测是否在区域内,chrome 与safari的区别 ctx.isPointInStroke(x, y)；检测是否在线上 还可以通过检测当前点的像素值，如果为透明，则该点不再路径上
cavas失真处理
大的cavas放在小的容器里面
api速查
api摘录自https://www.w3school.com.cn/tags/html_ref_canvas.asp
颜色、样式和阴影
属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式strokeStyle设置或返回用于笔触的颜色、渐变或模式shadowColor设置或返回用于阴影的颜色shadowBlur设置或返回用于阴影的模糊级别shadowOffsetX设置或返回阴影距形状的水平距离shadowOffsetY设置或返回阴影距形状的垂直距离
方法描述createLinearGradient()创建线性渐变（用在画布内容上）createPattern()在指定的方向上重复指定的元素createRadialGradient()创建放射状/环形的渐变（用在画布内容上）addColorStop()规定渐变对象中的颜色和停止位置
线条样式
属性描述lineCap设置或返回线条的结束端点样式lineJoin设置或返回两条线相交时，所创建的拐角类型lineWidth设置或返回当前的线条宽度miterLimit设置或返回最大斜接长度
矩形
方法描述rect()创建矩形fillRect()绘制“被填充”的矩形strokeRect()绘制矩形（无填充）clearRect()在给定的矩形内清除指定的像素
路径
方法描述fill()填充当前绘图（路径）stroke()绘制已定义的路径beginPath()起始一条路径，或重置当前路径moveTo()把路径移动到画布中的指定点，不创建线条closePath()创建从当前点回到起始点的路径lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条clip()从原始画布剪切任意形状和尺寸的区域quadraticCurveTo()创建二次贝塞尔曲线bezierCurveTo()创建三次方贝塞尔曲线arc()创建弧/曲线（用于创建圆形或部分圆）arcTo()创建两切线之间的弧/曲线isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false
转换
方法描述scale()缩放当前绘图至更大或更小rotate()旋转当前绘图translate()重新映射画布上的 (0,0) 位置transform()替换绘图的当前转换矩阵setTransform()将当前转换重置为单位矩阵。然后运行 transform()
文本
属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线
方法描述fillText()在画布上绘制“被填充的”文本strokeText()在画布上绘制文本（无填充）measureText()返回包含指定文本宽度的对象
图像绘制
方法描述drawImage()向画布上绘制图像、画布或视频
像素操作
属性描述width返回 ImageData 对象的宽度height返回 ImageData 对象的高度data返回一个对象，其包含指定的 ImageData 对象的图像数据
方法描述createImageData()创建新的、空白的 ImageData 对象getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据putImageData()把图像数据（从指定的 ImageData 对象）放回画布上
合成
属性描述globalAlpha设置或返回绘图的当前 alpha 或透明值globalCompositeOperation设置或返回新图像如何绘制到已有的图像上
其他
方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent()getContext()toDataURL()