心心念唸的Canvas系列文章經過長時間的整理和沉澱，終於決定動筆啦！我會從最簡單的API開始，逐步深入，再結合酷炫的例項，為大家帶來這一系列的文章，希望大家多提建議，多多鼓勵！^_^激動ing...
好，下面正文開始：
其實canvas本身很簡單，就是去學習它的API，多看例項，多自己動手練習，多總結。但是canvas的API實在是有點多，對於初學者來說，可能學到一半就止步不前了。我也有這種感覺，在學習的過程中，編寫例項，用到了其中很多的屬性和方法，但是回頭來看的時候總覺得什麼也沒用。所以決定系統性的記錄一下它常用到的API，方便以後查閱，也順便造福一下大家。
另外：
附一個之前學習的時候自己跟著教程寫的一個小遊戲：tinyHeart小遊戲
再附上關於此次canvas系列文章的例項程式碼github地址：About-Canvas
開始之前
假設html程式碼中有一個canvas標籤：
<canvas id="canvas">你的瀏覽器不支援canvas！</canvas>複製程式碼如果你的瀏覽器是IE8及以下，那麼很遺憾，上面那段文字會被渲染出來！而且下面的方法也都不能使用了；所以請使用支援canvas的瀏覽器來使用後面的方法。
//獲取canvas容器
var can = document.getElementById(‘canvas’);
//建立一個畫布
var ctx = can.getContext('2d');複製程式碼另外我們可以還可以得到容器的寬和高度
var canWid = can.width; //canvas 的寬度
var canHei = can.height; //canvas 的高度複製程式碼canvas只是一個容器，本身沒有繪製的能力，所以我們要得到一個畫布ctx，使之具有繪製各種圖形的能力。下文所有的方法都是ctx的方法。
繪製
繪製一個矩形：
//填充矩形（x, y是橫縱座標，原點在canvas的左上角）
ctx.fillRect(x, y, width, height);
//邊框矩形，預設1px 黑色。
ctx.strokeRect(x, y, width, height);
//清除指定的矩形區域，變為透明
ctx.clearRect(x, y, width, height); //繪製動態效果時，常用來清除整個畫布複製程式碼繪製路徑:
//新建路徑，beginPath是繪製新圖形的開始
ctx.beginPath()
//路徑（線）的起點，一般在上面這條命令後執行
ctx.moveTo(x, y)
//線的終點
ctx.lineTo(x, y)
//繪製圓形
ctx.arc(x, y, r, start, end, true/false) //x, y圓心，r半徑，start和end是開始和結束角度，false表示順時針（預設），true表示逆時針。
//繪製弧線
ctx.arcTo(x1, y1, x2, y2, r); //當前端點、(x1,y1)和(x2,y2)這三個點連成的弧線，r是半徑。
//閉合路徑，不是必須的，如果線的終點跟起點一樣，會自動閉合。
ctx.closePath()
//通過線條繪製輪廓（邊框）
ctx.stroke()
//通過路徑填充區域（實心）
ctx.fill()複製程式碼說明：
1.fill()和stroke()函式表示繪圖結束。如果要繼續繪製，需要重新新建路徑（beginPath()）。
2.如果lineTo()最後的路徑沒有封閉，fill()函式會自動封閉路徑，而stroke()函式不會。
例：繪製一個三角形
ctx.beginPath();
ctx.moveTo(75, 50); //路徑起點
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill(); //自動將路徑閉合，並預設填充黑色。複製程式碼樣式
顏色
ctx.fillStyle = 'red' //針對fill()有效的顏色，還可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。 ctx.strokeStyle = 'red' //針對stroke()有效的顏色，取值同上。 ctx.globalAlpha = 0.5; //透明度複製程式碼線段端點
ctx.lineWidth = 2; //線條寬度 ctx.lineCap = 'butt(預設)'、'round(圓弧)'、'square(方形)' //線段端點顯示的樣式複製程式碼var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; ctx.strokeStyle = 'black'; for (var i=0;i<lineCap.length;i++){ ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); }複製程式碼效果如下圖：
線段連線處
ctx.lineJoin = 'miter(預設)'、round(圓角)、`bevel(橫線)` //兩線段連線處所顯示的樣子複製程式碼var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; for (var i=0;i<lineJoin.length;i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(10,50+i*40); ctx.lineTo(50,10+i*40); ctx.lineTo(90,50+i*40); ctx.lineTo(130,10+i*40); ctx.lineTo(170,50+i*40); ctx.stroke(); }複製程式碼效果如下圖：
虛線
ctx.setLineDash([4, 2]) //設定虛線，引數為陣列，第一個值為實現寬度，第二個值為空白的寬度 ctx.lineDashOffset = 0; //虛線起始偏移量複製程式碼var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var offset = 0; function draw() { offset++; if (offset > 16) { offset = 0; } ctx.clearRect(0,0, can.width, can.height); ctx.setLineDash([6, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10,10, 100, 100); } setInterval(draw, 20);複製程式碼效果如下圖：
漸變
var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定義線性漸變，漸變的起點 (x1,y1) 與終點 (x2,y2)。 var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定義徑向漸變 bg.addColorStop(0, 'red'); //定義好，之後開始上色 bg.addColorStop(0.5, 'blue'); bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');複製程式碼var bg = ctx.createLinearGradient(0, 0, 0, 200); //線性漸變 bg.addColorStop(0, 'black'); bg.addColorStop(0.6, '#fff'); ctx.fillStyle = bg; ctx.fillRect(10, 10, 100, 100);複製程式碼效果如下圖：
var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); //徑向漸變
bg1.addColorStop(0, '#FF5F98');
bg1.addColorStop(0.75, '#FF0188');
bg1.addColorStop(1, 'rgba(255,1,136,0)');
ctx.fillStyle = bg1;
ctx.fillRect(0,0,150,150);複製程式碼效果如下圖：
文字
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2; //X軸陰影距離，負值表示往上，正值表示往下
ctx.shadowOffsetY = 2; //Y軸陰影距離，負值表示往左，正值表示往右
ctx.shadowBlur = 2; //陰影的模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //陰影顏色
ctx.font = "30px Times New Roman"; //設定字型和字型大小
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 15, 30); //實體文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100); //邊框文字複製程式碼效果如下圖：
文字的屬性出了上面的列出的以外，還有以下一些屬性：
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center'; //start, end, left, right or center
ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit' //ltr, rtl, inherit複製程式碼影像
var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0); //img為影像，(0, 0)為起始座標複製程式碼這裡的img可以是一個img物件，也可以是一個img元素。
<img id="img" src="./images/background.jpg" style="display:none;">
ctx.drawImage(document.getElementById('img'), 0, 0);複製程式碼另外，繪製圖片的時候還可以對圖片進行縮放，類似於css中的background-size：
ctx.drawImage(img, 0, 0, w, h); //w、h指定圖片的寬高，則會同比例縮放。複製程式碼變形
慢慢的從這裡開始，就要開始涉及到複雜的繪製了。而開始複雜的繪製之前，我們得先了解一個概念：canvas繪圖的狀態。
狀態
canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。另外，用來操作這個狀態的有兩個方法：
save()和restore()。save()用來儲存當前狀態，restore()用來恢復剛才儲存的狀態。他們都可以多次呼叫。
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 150, 150);
ctx.save(); //儲存當前狀態
ctx.fillStyle= '#fff';
ctx.fillRect(45, 45, 100, 100);
ctx.restore(); //恢復到剛才儲存的狀態
ctx.fillRect(70, 70, 50, 50);複製程式碼效果如下圖：
位移(translate)
ctx.translate(x, y); //更改canvas的原點複製程式碼var ctx = document.getElementById('canvas').getContext('2d'); for(var i = 1; i< 4; i++) { ctx.save(); //使用save方法儲存狀態，讓每次位移時都針對（0，0）移動。 ctx.translate(100*i, 0); ctx.fillRect(0, 50, 50, 50); ctx.restore(); }複製程式碼效果如下圖：
旋轉
ctx.rotate(Math.PI * 2) //參照原點順時針旋轉360度複製程式碼
ctx.translate(75,75); //把原點移動到(75, 75);
for (var i=1; i<6; i++){ // 從裡到外一共6圈
ctx.save();
ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
for (var j=0; j<i*6; j++){ // 每一圈有i*6個圓點
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}複製程式碼效果如下圖：
縮放
ctx.scale(x, y); //基於原點縮放，x、y是兩個軸的縮放倍數複製程式碼var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = 'red'; ctx.scale(0.8, 1.2); ctx.beginPath(); ctx.arc(75, 75, 60, 0, Math.PI * 2); ctx.fill();複製程式碼本來繪製的是一個半徑為60的圓形，但是經過縮放之後，實際效果如下：
動畫
元素的位置移動，就形成了動畫。
一幀一幀的來渲染這個元素，而且這個元素每一幀的位置都不一樣，我們的眼睛看到的就是動畫了。實現起來也很方便，js提供了兩個方法：setTimeout 和setInterval都可以實現，但是一個有逼格的程式設計師實現動畫是不會用這兩個方法的，而是用requestAnimationFrame這個方法。有什麼區別呢？下面簡單做個比較。
setInterval(myFun, 10);意思是隔一毫秒執行一個myFun函式，但是這樣就有一個問題了，比如我myFun函式裡面繪製的東西比較耗時，而10ms之內還沒有完全繪製出來，但是這段程式碼強制1ms之後又開始繪製下一幀了，所以就會出現丟幀的問題；反之，如果時間設定太長，就會出現畫面不流暢、視覺卡頓的問題。requestAnimationFrame(myFun);如果我們這樣寫，又是什麼意思呢？意思是根據一定的時間間隔，會自動執行myFun函式來進行繪製。這個”一定的時間間隔”就是根據瀏覽器的效能或者網速快慢來決定了，總之，它會保證你繪製完這一幀，才會繪製下一幀，保證效能的同時，也保證動畫的流暢。
結語
這些API已經包含了大部分常用的了，結合requestAnimationFrame函式已經可以繪製很多酷炫的效果了。但是光看這些API很簡單，但是想要在繪製遊戲或者動畫中用起來得心應手還需要看大量的例項，自己實踐總結的。
本文就到這裡，感謝各位看官～
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
