Canvas 學習筆記（二）——基礎圖形的繪製

距離上一篇已通過去好長段日子了，原本這篇早就該寫了，天不遂人願：筆記本的鍵盤壞掉了，而後送修了耽誤了好幾天。

上一篇簡單記錄了一些Canvas 的基礎知識，這一篇遲到的筆記來簡單記錄一下Canvas 繪製基本圖形。

說到基本圖形，無非是矩形、圓形、線段、曲線。不少所謂的圖案基本都是這幾種基本圖形組合而成。好比五星 ★ 其實就是幾條線段分夠填充而組成的圖案；圓弧是不閉合的圓形組成的；折線是多條線段鏈接而成的。

在開始介紹繪製基本圖形以前，有必要簡單介紹一下Canvas 的座標系統。座標系你們都不陌生，中學時候平面座標系都有學習過，X軸、Y軸。在HTML開發中，也存在着平面座標系。 Canvas的座標系統和HTML的座標系是相似的。有必定的相同的地方，也有不一樣的地方。

Canvas和HTML的座標系統原點都處於左上角，X軸上向右遞增正數，向左遞減；Y軸上向下遞增爲正數，向上遞減。可是Canvas和html有一個不一樣的地方：即Canvas容許咱們將原點進行平移，也即經過代碼咱們能夠將Canvas的原點修改到任意位置去，能夠不爲左上角。 後邊的筆記中我會講講怎麼修改Canvas的座標系。

關於座標系統能夠看看下面這張我從MDN偷來的圖。

1. 繪製矩形

   Canvas爲咱們提供了三種方法來繪製矩形：

   fillRect(x, y, width, height)   繪製一個填充的矩形
    strokeRect(x, y, width, height) 繪製一個矩形的邊框
    clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分徹底透明

   三個方法都接收4個參數，x、y分別表明了要繪製的矩形左上角的座標位置，width和height 則分別表明了矩形的寬高尺寸。三個方法雖然都是繪製矩形的，但也有不一樣的地方：strokeRect是用磚瓦圍了一個圍牆，咱們能看到的是圍牆；而fillRect則不只圍了一個圍牆，連圍牆裏面用磚瓦鋪平了，咱們能到一片的磚瓦；clearRect就有點相似於拆遷大隊 拆拆拆，把矩形區域內的東西都拆掉。

   http://codepen.io/YoRolling/p...

2. 繪製圓

   相對於繪製矩形，繪製圓（圓弧）就簡單的多了。只有兩個方法 arc 和 arcTo，但根據MDN的說明arcTo的實現不靠譜，咱們這裏就不對它多作解釋。咱們來看一下arcTo。

   arc(x, y, radius, startAngle, endAngle, anticlockwise)

   該方法有五個參數：x,y 爲繪製圓弧所在圓上的圓心座標;radius爲半徑;startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。參數anticlockwise 爲一個布爾值，爲true時，是逆時針方向，不然順時針方向,默認爲false,即順時針。

   來顆板栗吧：

   http://codepen.io/YoRolling/p...

3. 繪製路徑

   Canvas 繪製中最麻煩也是功能最強大的部分就是路徑繪製了。 咱們都知道兩點肯定一條直線（線段），路徑繪製中運用的就是這個定理。經過一組又一組的兩點繪製出各類複雜的圖形出來。

   經過路徑繪製一個圖形基本分爲一下幾步：

   • 首先，須要將畫筆移動到某處。

   • 而後你使用畫圖命令去畫出路徑。

   • 以後把路徑封閉。

   • 一旦路徑生成，你就能經過描邊或填充路徑區域來渲染圖形。
     對應到Canvas的API爲如下幾個API

   beginPath();
   moveTo(x,y);
   lineTo(x,y);
   closePath();
   fill();
   stroke();

   建立路徑意味着首先咱們要告訴Canvas咱們接下來要繪製路徑(beginPath)了，而後咱們將畫筆移動到某處moveTo，這裏就是兩點中的第一個點，接下來咱們要肯定第二個點了，即lineTo，假設咱們只畫一個線段，那麼接下來咱們就要告訴Canvas要結束繪製路徑了(closePath);當到這一步的時候咱們就能夠選擇這個圖形是什麼樣的了，是要fill仍是stroke。

   到這裏，你可能會以爲繪製路徑好麻煩啊，若是每次繪製路徑都要通過這麼多步驟的話，那要多麻煩啊。幸運的是，某些狀況下Canvas可以爲咱們自動推測完善一些步驟。

   • 當前路徑爲空，即調用beginPath()以後，或者canvas剛建的時候，第一條路徑構造命令一般被視爲是moveTo() ，不管最後的是什麼。出於這個緣由，你幾乎老是要在設置路徑以後專門指定你的起始位置。

   • 就是閉合路徑closePath(),不是必需的。這個方法會經過繪製一條從當前點到開始點的直線來閉合圖形。若是圖形是已經閉合了的，即當前點爲開始點，該函數什麼也不作。

   • 當你調用fill()函數時，全部沒有閉合的形狀都會自動閉合，因此你不須要調用closePath()函數。可是調用stroke()時不會自動閉合。

   其實，在以上幾種以外還有一個更爲有用的東西貝塞爾曲線，Canvas提供了一次貝塞爾曲線 和 二次貝塞爾曲線 。 這裏暫時先很少作介紹，實際上是由於我對貝塞爾不熟悉。在稍後回來補充這一點。

Canvas的基本操做方法基本介紹完了，經過合適的組合利用這些API 以及你的創意相信能夠建立出很是出彩的效果。