在canvas上一些常見屬性

以繪製矩形爲例

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">

</canvas>

繪製一個只有邊框的矩形：

<script type="text/javascript">
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   cxt.strokeStyle = "blue";
   cxt.rect(20,10,150,75);
   cxt.stroke();
</script>

c.getContext("2d"):指定在畫面上繪製的類型。

strokeStyle="blue":  邊框的顏色，這裏就是矩形邊框的顏色;

rext(x,y,width,height);對應（x偏移量，y偏移量，長度，高度）;

stroke(); 繪製出圖;

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

繪製一個填充的實心矩形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.rect(20,10,150,75);
cxt.fillStyle="#FF0000";
cxt.fill();
cxt.stroke();

這樣就填充了一個紅色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

單單繪製無邊框的矩形的第二種方法

 var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
cxt.fillRect(20,10,150,75);
    cxt.fillStyle="#FF0000";

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

到這裏就可以得到點規律啦：含有stroke字符的屬性名是用於繪製只有邊框的空心圖形。含有full字條的屬性名是用於繪製實心的圖形。

比如 strokeStyle是邊框的顏色。fillStyle填充的顏色。  

rect是隻有邊框的矩形。fillRect是有填充顏色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

接下來看看beginPath()和 closePath()是什麼東西;

先隨便繪製幾條直線

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#FF0000';
    cxt.lineWidth='5';
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.lineTo(190,80);
    cxt.lineTo(100,190);
    cxt.stroke();
</script>

cxt.lineWidth:線的寬度。

moveTo:畫線的起始座標

lineTo:畫一次線的終點座標

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

現在我們加入beginPath()

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#FF0000';
    cxt.lineWidth='5';
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
   cxt.beginPath();
    cxt.lineTo(190,80);
    cxt.lineTo(100,190);
    cxt.stroke();
</script

只有最後一條線，之前線都沒啦。

beginPath()的官方描述是這樣的：

（1）beginPath() 丟棄任何當前定義的路徑並且開始一條新的路徑。它把當前的點設置爲 (0,0)。

（2）當一個畫布的環境第一次創建，beginPath() 方法會被顯式地調用。

我的理解是beginPath() 就像一個橡皮擦。把之前在畫布上繪製的圖片全部擦掉了。所以只顯示了beginPath()後面的圖形。

還有就是既然之前的都擦掉了，那就是沒了moveTo. 只有兩個lineTo 還是能繪製直線。

這裏我的理解吧是這樣的：moveTo是代表起點。然後繪製到第一個lineTo（1）. 當出現第二個lineTo（2）的時候。第一個lineTo(1)就變成了起點，所以就算沒有moveTo，第一個出現的lineTo也可以充當的moveTo的作用。

所以就是 moveTo--->lineTo lineTo---->lineTo 但是lineTo是不能和moveTo連接的

看這例子

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#FF0000';
    cxt.lineWidth='5';
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.moveTo(10,150);
    cxt.lineTo(190,80);
    cxt.lineTo(100,190);
    cxt.stroke();
</script>

當出現第二個moveTo(10,150)的時候，就相當於開始繪製另外一條直線了。

----------------------------------------------------------------------------------------------------------------------------------------------------------------

然後最一個closePath();

官方描述：

（1）如果畫布的子路徑是打開的，closePath() 通過添加一條線條連接當前點和子路徑起始點來關閉它。

（2）如果子路徑已經閉合了，這個方法不做任何事情。

（3）一旦子路徑閉合，就不能再爲其添加更多的直線或曲線了。要繼續向該路徑添加，需要通過調用 moveTo() 開始一條新的子路徑。

還是通過例子理解理解吧

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#FF0000';
    cxt.lineWidth='5';
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
   cxt.closePath();
    cxt.lineTo(10,50);
    cxt.lineTo(190,80);
    cxt.lineTo(100,190);
    cxt.stroke();
</script>

當moveTo(10,10)畫到lineTo(150,150)時就結束了之後的繪製。 並且之後的線重新從moveTo(10,10)開始向closePath()之後的lineTo(10,50)繪製，這個就驗證了官方描述的第一點。（closePath() 通過添加一條線條連接當前點和子路徑起始點來關閉它。）

如果我們在closePath()後面給個moveTo()。那麼後面的線就會前當前的moveTo()開始繪製了。驗證了最三點（要繼續向該路徑添加，需要通過調用 moveTo() 開始一條新的子路徑。）

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#FF0000';
    cxt.lineWidth='5';
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.closePath();
    cxt.moveTo(10,150);
    cxt.lineTo(10,50);
    cxt.lineTo(190,80);
    cxt.lineTo(100,190);
    cxt.stroke();
</script>

當closePath()下面有moveTo()，那之後的線就從這個新的moveTo()開始繪製。

------------------------------------------------------------------------------------------------------------------------------------------------------

總之，beginPath()是把畫布都擦乾淨，重新開始繪製圖片。 closePath();是結束當前圖形的繪製。繪製另外一個圖形。

-------------------------------------------------------------------------------------------------------------------------------------------------------------

我也是剛剛開始學習Canvas的使用。以上純屬個人觀點。僅供參考。各位還是根據自己的實際情況去理解吧！