今天小编将分享Canvas(画布)拓展
创建路径
绘制矩形或圆形， 开始标识方法 - beginPath()
首先是设置图形：rect(x,y,width,height) - 矩形、 arc(x,y,radius,startAngle,endAngle,direction) - 圆形或弧形
其中：x和y - 绘制圆形的圆心坐标值
radius - 绘制圆形的半径
startAngle - 开始位置
endAngle - 结束位置
direction - 是顺时针还是逆时针
Boolean值,可选项，默认值为false,表示顺时针
结束标识方法 - closePath()；这个结束标识可有可无的方法，因为：当绘制空心弧形时， 增加此方法 - 闭口、 不用此方法 - 开口
绘制方法：fill()、stroke()
1.绘制直线：开始标识方法 - beginPath()
设置直线的起点坐标值即moveTo(x,y)
设置直线的终点坐标值即lineTo(x,y)
结束标识方法 - closePath()
绘制方法 - stroke()
2. 绘制折线： 开始标识方法 - beginPath()
设置直线的起点坐标值即 moveTo(x,y)
设置直线的终点(起点)坐标值 lineTo(x,y)
设置直线的终点坐标值 lineTo(x,y)
结束标识方法 - closePath()
绘制方法 - stroke()
设置线条：
lineWidth - 设置线的宽度（默认值为 1 ）
lineCap - 设置线的端点形状
butt - 默认值,平角
round - 圆角
square - 正方
lineJoin - 设置线的焦点形状
miter - 默认值,尖角
round - 圆角
bevel - 斜角
miterLimit - 设置尖角的程度
需要特别注意： 必须lineJoin的值为"miter"
绘制图片
drawImage(img,x,y)，其中img - 绘制的图片内容、x和y - 绘制图片的坐标值、默认大小等于图片的原大小(宽度和高度)
drawImage(img,x,y,width,height)，其中img - 绘制的图片内容、、 x和y - 绘制图片的坐标值、 width和height - 设置绘制图片的宽度和高度
需要特别注意的是：设置宽度和高度之间的比例,一定按照图片高宽比。
在实际开发中常常遇到的问题： 一些浏览器,导致图片加载和绘制速度不正确 - 绘制失败。
解决方法：将加载的图片绑定onload事件， 在onload事件的处理函数中,进行绘制。
平铺图片
createPattern(img,type)，其中img - 设置平铺的图片内容、 type - 平铺方式
可以值为：no-repeat - 不平铺
repeat - 平铺
repeat-x - 水平平铺
repeat-y - 垂直平铺
平铺实现的步骤
1.设置平铺方式
2.返回一个平铺对象
3.设置填充或描边样式为平铺
4.绘制图形
切割图片
如何切割 - 使用创建路径方式
beginPath()
rect()或arc()
closePath()
clip() - 切割方法
实现步骤:
1.绘制图片
2.切割图片
画布方法
状态方法
save() - 保存方法， 将画布设置内容进行保存， 只能保存一次， 保存多次,向前覆盖
restore() - 读取(恢复)方法，读取之前保存的画布设置内容
转换方法
scale(x,y) - 表示缩放(放大或缩小)值小于 1 - 表示缩小， 值等于 1 - 表示原大小， 值大于 1 - 表示放大
translate(x,y) - 表示平移， 绝对平移(100,150) - 与上次坐标值无关 ，该方法)相对平移(100,150) - 与上次坐标值有关
rotate(degrees) - 表示旋转画布，角度公式 - degrees Math.PI / 180
需要特别注意的是：该方法旋转画布,并不旋转图形、 画布旋转方向,图形旋转相反方向。