canvas绘图

1.创建路径绘制线条(直线和折线、多边形)

 1. 绘制方法
        绘制之前要调用beginPath
     1）设置起点坐标值 
        moveTo(x,y);  

     2）设置终点(折点)坐标值
        lineTo(x,y);

  2. 绘制线条的属性
      1）设置线条的宽度，默认1px
        lineWidth

     2）设置线条端点的形状
        lineCap 
        butt - 平角
        round - 圆角
        square - 正方向

     3）设置两条线交点的形状
        lineJoin
        miter - 尖角 
        round - 圆角
        bevel - 斜角 canvas

     4）miterLimit - 配合lineJoin使用
       lineJoin设置为miter，该属性值设置尖角延伸范围

2.绘制图片

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也要等到图片加载完毕后执行

绘制图片

3.切割图片

使用clip()切割图片

        //首先导入Chart.js文件


            
            

        
   

圆饼图