1.創(chuàng)建路徑繪制線條(直線和折線、多邊形)

 1. 繪制方法
        繪制之前要調(diào)用beginPath
     1）設(shè)置起點坐標值 
        moveTo(x,y);  

     2）設(shè)置終點(折點)坐標值
        lineTo(x,y);

  2. 繪制線條的屬性
      1）設(shè)置線條的寬度顽分，默認1px
        lineWidth

     2）設(shè)置線條端點的形狀
        lineCap 
        butt - 平角
        round - 圓角
        square - 正方向

     3）設(shè)置兩條線交點的形狀
        lineJoin
        miter - 尖角 
        round - 圓角
        bevel - 斜角 canvas

     4）miterLimit - 配合lineJoin使用
       lineJoin設(shè)置為miter，該屬性值設(shè)置尖角延伸范圍

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也要等到圖片加載完畢后執(zhí)行

    <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";
            //創(chuàng)建平鋪對象
            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.畫布縮放旋轉(zhuǎn)

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

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

  3、rotate(); 旋轉(zhuǎn)畫布
    degrees * Math.PI / 180;

   4聋迎、 save() 保存當前畫布屬性脂矫、狀態(tài)

   5、 resotre() 恢復(fù)畫布屬性狀態(tài)

5.用chart.js繪制圖

<script type="text/javascript" src="Chart.js"></script>//首先導(dǎo)入Chart.js文件

<div id="" style="width:300px;height:300px;">
            <!--想要進一步設(shè)置圖表的寬和高霉晕，需要再設(shè)置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,{})
                 * 參數(shù)1：畫布對象
                 * 參數(shù)2：數(shù)據(jù)和配置信息
                 * */
                
                var data = {
                    //對應(yīng)每一個分類的內(nèi)容
                        labels: [
                            "black",
                            "Blue",
                            "Yellow"
                                ],
                        //表單的數(shù)據(jù)信息
                        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>   

圓餅圖