H5-12.16canvas高级应用及插件导入

一、canvas-创建路径绘制线条(直线和折线、多边形)

1. 绘制方法
   1）设置起点坐标值 moveTo(x,y);
   2）设置终点(折点)坐标值 lineTo(x,y);

2. 绘制线条的属性
   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事件)后，再绘制图片

2. 平铺图片

   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;

代码

效果图

日常一首音乐：
http://music.163.com/#/song?id=436046438