一、canvas-创建路径绘制线条(直线和折线、多边形)
绘制方法
1）设置起点坐标值 moveTo(x,y);
2）设置终点(折点)坐标值 lineTo(x,y);绘制线条的属性
1）设置线条的宽度，默认1px lineWidth
2）设置线条端点的形状 lineCap
butt - 平角 round - 圆角 square - 正方向
3）设置两条线交点的形状 lineJoin
miter - 尖角 round - 圆角 bevel - 斜角
4）miterLimit - 配合lineJoin使用
lineJoin设置为miter，该属性值设置尖角延伸范围
代码
效果
二、canvas绘制图片
1、 按照图片原大小加载
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
注意： 必须要保证图片加载完毕(onload事件)后，再绘制图片
-
平铺图片
var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色
img : 平铺的图片
type: 平铺的方式repeat/no-repeat/repeaet-x/repeat-y
注意：
必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行
代码
效果图
三、切割图片
按照创建路径使用
clip()
代码
效果图
四、 画布方法
1、 scale(x,y); - 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放
2、translate(x,y) - 重新映射画布上的（0,0）位置
3、rotate(); 旋转画布
degrees * Math.PI / 180;
代码
效果图
