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

    <canvas id="canvas" width="400px" height="400px" ></canvas>
        <script type="text/javascript">
            var painter=document.getElementById("canvas").getContext("2d");
            var img=new Image();
            img.src="class.jpg";
            //创建平铺对象
            img.onload=function(){
                var pat=painter.createPattern(img,"repeat");
            //将平铺对象作为填充颜色
            painter.fillStyle=pat;
            painter.fillRect(0,0,400,400);
            }
        </script>

绘制图片

3.切割图片

使用clip()切割图片

<canvas id="canvas" width="400px" height="400px"></canvas>
        <script type="text/javascript">
            var painter=document.getElementById("canvas").getContext("2d");
            var img=new Image();
            img.src="class.jpg";
            img.onload=function(){
                painter.drawImage(img,0,0);
            }
            painter.beginPath();
//          painter.rect(0,0,100,100);
            painter.arc(96,84,84,0,2*Math.PI);
            //指定路径开始裁剪
            painter.clip();//反向选择裁剪图片

切割图片

4.画布缩放旋转

   1、 scale(x,y); - 缩放
      x - 水平方向上的缩放
      y - 初值方向上的缩放

  2、translate(x,y) - 重新映射画布上的（0,0）位置

  3、rotate(); 旋转画布
    degrees * Math.PI / 180;

   4、 save() 保存当前画布属性、状态

   5、 resotre() 恢复画布属性状态

5.用chart.js绘制图

<script type="text/javascript" src="Chart.js"></script>//首先导入Chart.js文件

<div id="" style="width:300px;height:300px;">
            <!--想要进一步设置图表的宽和高，需要再设置canvas的宽和高-->
            <canvas id="canvas" width="400px" height="400px"></canvas>
</div>
        
<script type="text/javascript">
        var painter=document.getElementById("canvas").getContext("2d");
                // For a pie chart
                /*
                 *new chart(ctx,{})
                 * 参数1：画布对象
                 * 参数2：数据和配置信息
                 * */
                
                var data = {
                    //对应每一个分类的内容
                        labels: [
                            "black",
                            "Blue",
                            "Yellow"
                                ],
                        //表单的数据信息
                        datasets: [
                            {   //所占的大小
                                data: [300, 50, 100],
                                backgroundColor: [
                                    "#FF6384",
                                    "#36A2EB",
                                    "#FFCE56"
                                    ],
                                hoverBackgroundColor: [
                                    "#FF6384",
                                    "#36A2EB",
                                    "#FFCE56"
                                ]
                            }]
                    };
                    
            var myPieChart = new Chart(painter,{
                    type: 'pie',
                    data: data,
//                  options: options
                });
                
        </script>   

圆饼图