canvas常用方法总结

this.canvas 获取上下文canvas元素 fillStyle() 颜色 font='' 字体样式 globalAlpha='' 透明度 globalCompositeOperation=''混合模式 lineCap='' 线条端点的样式 lineDashOffset='' 虚线绘制的偏移距离 lineJoin='' 线条转角的样式 lineWidth='' 表示线宽 miterLimit='' 限制平角和尖角 shadowBlur='' 指定阴影的模糊程度 shadowColor='' 指定阴影颜色 shadowOffsetX='' 阴影的水平偏移大小 shadowOffsetY='' 阴影的垂直偏移大小 strokeStyle='' 设置描边的样式[color描边设置为颜色gradient描边设置为渐变pattern描边设置为图案] textAlign='' 指定文本的水平对齐方式 textBaseline='' 文本垂直对齐方式 arc() 绘制圆弧[圆弧对应横坐标，圆弧对应纵坐标，半径大小，开始角度，结束角度] ellipse() 绘制椭圆(150, 75, 80, 40, Math.PI / 4, 0, 2 * Math.PI)[圆心横坐标，圆心纵坐标，长轴半径大小，短轴半径大小，圆弧旋转度，圆弧开始角度，圆弧结束角度，true或false顺时针或逆时针] arcTo() 给路径添加圆弧[控制点的横坐标，控制点的纵坐标，控制点的横坐标，控制点的纵坐标，圆弧的半径大小] lineTo() 绘制直线以连接最后的子路径[直线落点横坐标,直线落点纵坐标] moveTo() 路径绘制的起始点[落点的横坐标,落点的纵坐标] quadraticCurveTo() 绘制二次贝赛尔曲线，要两个点[控制横坐标,控制纵坐标,结束横坐标,结束纵坐标] beginPath() 要开始一个新的路径了，和之前绘制的分开 bezierCurveTo() 控制曲线[控制点的横坐标，控制点的纵坐标，控制点的横坐标，控制点的纵坐标，结束点的横坐标，结束点的纵坐标] clearRect() 不断清除画布内容再绘制，形成动画效果[横坐标，纵坐标，清除高，清除宽] createLinearGradient()渐变，是全局的，不是画布内的渐变[起始横坐标，起始纵坐标，结束横坐标，结束纵坐标] createRadialGradient()用来创建径向渐变[起始横坐标，起始纵坐标,起始园半径，结束横坐标，结束纵坐标,结束园半径] clip() 路径剪裁 closePath() 吧最后点和开始点相连，形成闭合区域 createImageData() 创建一个全新的imageData对象，里面所有像素都是透明黑 createPattern() 创建一个平铺对象，可以指定平铺方式 drawFocusIfNeeded() 可以让当前路径获取指定路径轮廓高亮 drawImage() 图像处理[img,横坐标,纵坐标,宽度，高度，起始横坐标，起始纵坐标,宽度画多少,高度画多少] fill() 路径填充方法 fillText() 文字输入[内容,横坐标，纵坐标] getImageData() 对图像进行处理[起始横坐标，起始纵坐标，宽度，高度] getLineDash() 获取当前虚线的样式 isPointInPath() 检测某个点是否在当前路径中[检测点的横坐标,监测点的纵坐标]path指Path2D对象 isPointInstroke() 检测某个点是否在描边路径中[检测点的横坐标,监测点的纵坐标]path指Path2D对象 measureText() 可以测量文本的一些数据返回宽度等信息[被测量的文本] putImageData() 将imageData对象的数据绘制到位图上[img,替换横坐标,替换纵坐标,左上角横坐标,左上角纵坐标,宽度,高度] restore() 弹出存储的Canvas状态 save() 保存当前Canvas画布状态并放在栈的最上面 scale() 用来缩放坐标[x水平缩放比例,y垂直缩放比例] transform() 实现缩放，旋转，拉伸，位移 [a水平缩放,b水平斜切,c垂直斜切,垂直缩放，e水平位移，f垂直位移] translate() 实现整体位移[x水平位移的距离，y是垂直位移的距离]

描边

stroke() 对路径进行描边 strokeRect() 实现矩形描边效果[x横坐标,纵坐标,宽度,高度] strokeText() 文本描边[字体内容,横坐标,纵坐标] setLineDash() 设置虚线样式，用数组[5,10]

矩形

fillRect() 矩形填充方法[横坐标，纵坐标，宽度，高度] rect() 绘制正方形或长方形[x横坐标,y纵坐标,宽度,高度] setTransform() 绘制一个矩形平行四边形[a水平缩放,b水平斜切,c垂直斜切,d垂直缩放,e水平位移,f垂直位移] rotate() 旋转矩阵[旋转45°，旋转弧度就是45 * Math.PI / 180]