創建路徑繪制線條

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

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

        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            //創建平鋪對象
            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);
        }
        //注意調用beginPath()
        context.beginPath();
        //指定路徑
        context.arc(192/2,168/2,80,0,2*Math.PI);
        //開始切割，裁剪圖片 clip()
        context.clip();
     </script>

畫布方法，縮放平移和旋轉

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

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

3.rotate(); 旋轉畫布

   degrees * Math.PI / 180;
   
   degrees代表了你想旋轉的角度，正數是順時針旋轉

4.save() 保存當前畫布屬性、狀態

5.restore() 恢復畫布屬性狀態

例子
    <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按照第一個參數的比例縮放
        //y和height按照第二個參數的比例縮放
        //context.scale(0.5,0.5);
        
        //translate平移其實是改變參考點的位置
        //沒有設置平移前，參考點是（0,0）
        //context.translate(50,50)
        
        //設置旋轉角度，正數是順時針旋轉，參考點為translate的x和y
        /*
         * 如果想設置中心旋轉
         * 1.先利用translate改變旋轉的參考點
         * 2.改變參考點以后圖形的位置會發生變化，讓圖形的x和y分別減去translate的x和y，讓圖形恢復到原來的位置
         * 3.使用rotate讓圖形進行旋轉
        */
        context.translate(200,200)
        context.rotate(45*Math.PI/180);
        context.fillRect(-100,-100,200,200);
    </script>