開始繪製圖形之前有一點需要說一下，Canvas 採用的座標系是W3C的座標系 ：

X軸 正方向 向右;

Y軸 正方向 向下;

所有的繪製方向都以這個為準。

Canvas 左上角的座標是 X :0 ; Y : 0 雖然寫負數不會報錯，但是Canvas 預設超出部分是不顯示的;

如圖所示：

本章需要用到的API（關注點放在 . 後面就行 ^_^）:

1、直線
ctx.moveTo(x1,y1);

ctx.lineTo(x2,y2); //可重複

ctx.stroke();

// 開始繪製想要的圖形   （可以想象自己虛擬拿了一個畫筆再操作）
 

    ctx.moveTo(100,50);     //將畫筆move(移動)到想要開始畫的座標位置   從畫筆X軸 座標100  Y軸座標50開始畫
    ctx.lineTo(700,50);      //畫到停止的座標位置    一直畫到X軸 座標700  Y軸座標50 停止
    ctx.stroke();           //最後一步  確定，顯示

效果圖：

這裡再用直線畫一個矩形出來：

ctx.strokeStyle = "#F00";       //定義畫筆的顏色
    ctx.moveTo(100,100);     //拿起畫筆 移動，重新繪製 從畫筆X軸 座標100  Y軸座標100開始畫
    ctx.lineTo(700
 
,100);      //畫到停止的座標位置  一直畫到X軸 座標700  Y軸座標100  
                            //lineTo個人感覺就是一直一直在畫，沒有把畫筆擡起來過
    ctx.lineTo(700,400);      //繼續畫到X軸 座標700  Y軸座標400
    ctx.lineTo(100,400);      //繼續畫到X軸 座標100  Y軸座標400
    ctx.lineTo(100,100);      //繼續畫到X軸 座標100  Y軸座標100
    ctx.stroke();             //完成，可以顯示了

效果圖：

2、矩形
（描邊矩形）
ctx.strokeStyle= 屬性值;
ctx.strokeRect(x,y,width,height);
！！！需要注意的是 strokeStyle 必須寫在 strokeRect之前 否則無效

//描邊矩形   (畫矩形可以考慮用這個，將上面7句話才能顯示的效果 2句話就能搞定)
    ctx.strokeStyle = "#0695FF";        //定義矩形的顏色
    ctx.strokeRect(200,150,200,150);    //從X軸 座標200  Y軸座標150開始，畫個寬為200 高為150 的長方形

效果圖：

（填充矩形）
ctx.fillStyle= 屬性值;
ctx.fillRect(x,y,width,height);
！！！同上 需要注意的是 fillStyle 必須寫在 fillRect 否則無效
另外strokeStyle 與 fillStyle 是屬性， strokeRect 與 fillRect 是方法。這個要區別一下;
不太理解的可以在控制檯 console.log() 輸出看一下就大概懂了！ （建議使用Chrome）

 //填充矩形
    ctx.fillStyle="#FF9BFA";
    ctx.fillRect(200,500,200,100);

效果圖：

關於 strokeStyle 和 fillStyle 屬性值其實一般有以下幾種，

ctx.strokeStyle=”#0695FF”;

ctx.strokeStyle=”red”;

ctx.fillStyle=”rgb(255,255,255)”;

ctx.fillStyle=”rgba(255,255,255,0.8)”;

例如：

//兩個矩形疊加
    ctx.fillStyle="rgba(255,155,250,0.5)";
    ctx.fillRect(500,500,100,100);

    ctx.fillStyle="rgba(95,211,255,0.5)";
    ctx.fillRect(550,550,100,100);

效果圖：

除了上面說的兩種繪製矩形的方法外還有一種也可以用：
ctx.rect(x,y,width.height);
與 strokeRect 和 fillRect 不同， 它每次在繪製完後需要單獨再呼叫一次 stroke() 或 fill() ，才能顯示;

//rect()
    ctx.strokeStyle="#f00";             //描邊矩形
    ctx.rect(50,600,100,100);
    ctx.stroke();

    ctx.fillStyle="#52F0FC";             //填充矩形
    ctx.rect(160,610,50,50);
    ctx.fill();

還有要注意的是,在不做任何處理的情況下！，在同一個Canvas 下 ，fill()方法 會把之前所有沒有填充的圖形全部填充了，需要稍微注意下！

（Canvas 是基於“狀態” 繪製的 圖形，每一次stroke() 或 fill() 都會檢測下程式碼的所有狀態，同一路徑下設定的全部繪製 ;

解決方法 ： 可以用beginPath() 等 重開路徑， 後面再補充）

效果圖：

關於矩形還有最後一個 就是清空矩形：
ctx.clearRect(x,y,width,height);

ctx.clearRect(200,150,200,100);   //清空從X軸 座標200  Y軸座標150開始，寬為200 高為100 的地方 ;

效果圖：