很多人知道canvas，但不一定都熟悉或者經常使用，作為一種專項工具，如果業務不是跟影像或者圖表強相關，的確不常用，但對它的學習和了解還是必要的，這篇文章我們就一起來入個門。
Canvas是什麼
可以理解為，它提供了一塊畫布，在它所掌控的區域，可以運用各種方法繪製圖形、文字，或者製作動畫、處理影像，等等。
通常我們能夠看到一些炫酷的動畫，很多都是canvas做出來的，但是需要各種元素和技巧綜合使用，不是一蹴而就的，我們先從基礎看起。
搭好舞臺
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
<canvas id="canvas" width="150" height="150"></canvas>
複製程式碼三行程式碼，完成舞臺搭建。
繪製的幾要素
位置：從哪裡開始
路徑：圖形的軌跡
輪廓：繪製空心圖形
填充：繪製實心區域
用程式碼來表達就是：
畫筆位置——moveTo(x, y)
將畫筆移動到指定的座標x、y。
直線——lineTo(x, y)
繪製一條從當前位置到指定位置的直線。
圓弧——arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心、以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（預設為順時針）來生成。
矩形——rect(x, y, width, height)
繪製一個左上角座標為（x,y），寬高為width以及height的矩形。
幾個基本的圖形就是這樣了，還有一種比較複雜的是貝塞爾曲線。
二次貝塞爾——quadraticCurveTo(cp1x, cp1y, x, y)
三次貝塞爾——bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
什麼是較複雜的圖形呢？比如：氣泡、心形，或者其他不是很常規的形狀，如使用上面的方法就較難實現，貝塞爾曲線更能勝任。
那其實除了這些，canvas還有兩個動作要做，就是開始和結束繪製的指令，分別是：
beginPath() 和 closePath()
放在路徑繪製的開端和末尾，就像這樣：
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
複製程式碼（如果路徑本身就是閉合的，可以省去closePath，但一般建議保留）
完成這些之後，就可以進行下一步，繪製輪廓，或者填充區域，當然，可以兩者都做：
ctx.stroke(); //輪廓
ctx.fill(); //填充
複製程式碼除了這兩個操作，還有其他的操作，比如設定色值、線寬、是否旋轉等，後面做豐富示例時我們再一一介紹。
完整示例如下：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();//輪廓
ctx.beginPath();
ctx.arc(200, 200, 40, 0, 36, false);
ctx.closePath();
ctx.fillStyle="rgb(2,100,30)";//填充顏色
ctx.fill();//填充
複製程式碼
這只是一個很簡單的效果，我們也看到了路徑之後其他設定項的出現，就是填充顏色，這只是其中之一，但這裡暫時不詳述，我們先看看，除了圖形，canvas還能做什麼？
文字和圖片
文字很好實現，直接上程式碼：
ctx.font = "48px serif"; //字號、字型型別
ctx.fillText("Hello world", 10, 300); // 文字內容和位置
複製程式碼但其實文字也是有兩種效果的，填充和輪廓，上面這種是填充：
如果把第二行程式碼換成：
ctx.strokeText("Hello world", 10, 50);
複製程式碼就是輪廓了
除此之外，還有一些對齊方式和文字方向的設定，先略去。
來看看圖片
圖片分為兩塊，處理圖片和繪製圖片。
獲取同頁面內的圖片不再贅述，跟通常的dom操作一樣，看看建立圖片的方法：
var img = new Image(); // 建立一個<img>元素
img.src = 'myImage.png'; // 設定圖片源地址
複製程式碼獲取或者建立了影像，怎麼把它繪製到canvas裡去呢？
drawImage(image, x, y)
其中 image 是 image 或者 canvas 物件，x 和 y 是其在目標 canvas 裡的起始座標。
比如我們可以把上面的程式碼寫成這樣：
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = '/img/canvas_intro/canvas_01.png';
複製程式碼上面這段程式碼，我把當前頁面的三角形拿了過來，就是跟前面那個效果一樣的了
這裡只是把影像放入我們的工作區，如果想在這個區域畫別的圖形亦可，程式碼接著往下寫就好了，有時候這可以為我們節省成本，比如，稍複雜一點的影像作為背景，簡單的圖形作為前景畫出。
那其實這個方法也不止這麼簡單，它有兩個變種
縮放
drawImage(image, x, y, width, height)
即指定影像大小，也就是可以根據需要進行縮放。
裁切
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
一長串引數看著有點頭皮發麻，但就因為這樣，才能讓我們去操作細節，它是用來裁切影像的。
前面四個用來處理圖片源的剪下起始位置和大小，就跟我們平時截圖一個道理，後面的引數，是將裁切後的影像，放置在畫布的什麼位置，以及那個區域的大小。如下所示：
小結
這篇文從零開始介紹了canvas的工具箱裡有哪些工具，雖然尚不完整，作為開端，已經夠多，先到這，更多功能我們下篇再聊~