創(chuàng)建路徑繪制線條

    <canvas id="canvas" width="400px" height="400px"></canvas>
    
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        
        //只要使用路徑作圖就要調(diào)用
        context.beginPath();
        context.strokeStyle = "yellow";
        //  moveTo設(shè)置起點(diǎn)
        context.moveTo(20,20);
        //  lineTo設(shè)置終點(diǎn)/折點(diǎn)
        context.lineTo(100,100);
        context.lineTo(30,10);
        
        //  lineWidth設(shè)置線條的寬度
        context.lineWidth = 20;
        //   lineCap設(shè)置線條端點(diǎn)的形狀  butt - 平角  round - 圓角   square - 正方向
        context.lineCap = "square";
        //   設(shè)置兩條線交點(diǎn)的形狀  miter - 尖角  round - 圓角  bevel - 斜角
        context.lineJoin = "miter";
        //設(shè)置尖角延伸范圍  miterLimit - 配合lineJoinde的miter使用
        context.miterLimit = 100;
        //closePath()可以讓起點(diǎn)和終點(diǎn)閉合
        //context.closePath();
        
        //  畫圖，此時(shí)劃線使用stroke粱挡，使用fill無效
        context.stroke();

    </script>

繪制與切割圖片

    <canvas id="canvas" width="400px" height="400px" style="background: red;"></canvas>
    
    <script type="text/javascript">

//繪制圖片
        /*var context = document.getElementById("canvas").getContext("2d");

        //獲取圖片的兩種方式
        //var img = document.createElement("img");
        //img.src = "class.jpg";
        
        var img = new Image();
        img.src = "class.jpg";

        //設(shè)置寬高是沒效果的
        img.width = 200;
        img.height = 200;
        
        //當(dāng)圖片準(zhǔn)備好后再繪制
        img.onload = function  () {
            //繪制圖片,按照?qǐng)D片本身的大小加載
            //drawImage(img,x,y)  img - 當(dāng)前加載的圖片  x和y - 圖片左上角的位置 
            context.drawImage(img,4,14)
        }*/
        
//平鋪圖片
        //var ptn = createPattern(img,type) 返回一個(gè)平鋪對(duì)象衬衬，將這個(gè)對(duì)象作為將要繪制圖像的填充顏色  img : 平鋪的圖片  type: 平鋪的方式

        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            //創(chuàng)建平鋪對(duì)象
            var ptn = context.createPattern(img,"repeat");
            context.fillStyle = ptn;
            context.fillRect(0,0,400,400);
        }
    </script>

//切割圖片
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            context.drawImage(img,0,0);
        }
        //注意調(diào)用beginPath()
        context.beginPath();
        //指定路徑
        context.arc(192/2,168/2,80,0,2*Math.PI);
        //開始切割，裁剪圖片 clip()
        context.clip();
     </script>

畫布方法刁笙，縮放平移和旋轉(zhuǎn)

1.scale(x,y); - 縮放
  x - 水平方向上的縮放
  y - 初值方向上的縮放
  context.scale(sx,sy)
  context.fillRect(x,y,width,height)
  sx:  控制x和width的縮放
  sy:  控制y和height的縮放
  
    多次縮放效果會(huì)進(jìn)行疊加

2.translate(x,y) - 重新映射畫布上的（0,0）位置
  x破花，y改變了圖形的參考點(diǎn)

3.rotate(); 旋轉(zhuǎn)畫布

   degrees * Math.PI / 180;
   
   degrees代表了你想旋轉(zhuǎn)的角度，正數(shù)是順時(shí)針旋轉(zhuǎn)

4.save() 保存當(dāng)前畫布屬性疲吸、狀態(tài)

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

例子
    <canvas id="canvas" width="400px" height="400px" style="background: orange;"></canvas>
    
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        context.fillStyle = "chocolate";
        //縮放座每，x，y摘悴，width峭梳，height都按照比例縮放
        //x和width按照第一個(gè)參數(shù)的比例縮放
        //y和height按照第二個(gè)參數(shù)的比例縮放
        //context.scale(0.5,0.5);
        
        //translate平移其實(shí)是改變參考點(diǎn)的位置
        //沒有設(shè)置平移前，參考點(diǎn)是（0,0）
        //context.translate(50,50)
        
        //設(shè)置旋轉(zhuǎn)角度蹂喻，正數(shù)是順時(shí)針旋轉(zhuǎn)葱椭，參考點(diǎn)為translate的x和y
        /*
         * 如果想設(shè)置中心旋轉(zhuǎn)
         * 1.先利用translate改變旋轉(zhuǎn)的參考點(diǎn)
         * 2.改變參考點(diǎn)以后圖形的位置會(huì)發(fā)生變化，讓圖形的x和y分別減去translate的x和y口四，讓圖形恢復(fù)到原來的位置
         * 3.使用rotate讓圖形進(jìn)行旋轉(zhuǎn)
        */
        context.translate(200,200)
        context.rotate(45*Math.PI/180);
        context.fillRect(-100,-100,200,200);
    </script>