我的Canvas常用方法和requestAnimationFrame

我自己常用的canvas函數

• 獲取目標元素

var myCanvas = document.getElementById("canvas");
var context = myCanvas.getContext("2d");

• 繪制矩形

context.fillRect(x, y, width, height); // 繪制實心矩形
context.strokeRect(x, y, width, height); // 繪制空心矩形

• 繪制路徑

context.beginPath(); // 開始繪制路徑
context.moveTo(x, y); // 路徑開始點坐標
context.lineTo(x, y); // 路徑結束點坐標
context.stroke(); // 繪制空心路徑
context.fill(); // 繪制實心路徑
context.closePath(); // 繪制路徑結束

• 繪制文字

context.font = "60px 黑體"; // font信息，至少包含字體大小和字體名稱
context.fillText(text, x, y); // 繪制實心文字
context.strokeText(text, x, y); // 繪制空心文字

• 繪制樣式

context.fillStyle = "red"; // 實心顏色
context.strokeStyle = "#ff4355"; // 空心顏色
context.lineWidth = 32; // 

• 繪制其他

context.arc(x, y, r, startAngle, endAngle, false);
// 繪制圓形x,y為圓心坐標，r為圓的半徑，sA為圓的開始弧度，eA為圓結束的
// 弧度，false表示按順時針方向繪制，true的話為逆時針。  
// 例如一個圓為：  
context.arc(100, 100, 100, 0, 2*Math.PI, false);
/**********************************************/
context.drawImage(image, x, y, width, height);
// 傳入一個圖片實例，繪制在畫布上
context.drawImage(image, sx, sy, sw, sh, x, y, width, height);
// 對圖片進行剪裁
context.clearRect(x, y, width, heigth); // 清除畫布

requestAnimationFrame

他是干嘛的呢？在早期瀏覽器中實現動畫是使用setTimeOut和setInterval，但是我們知道JS是單線程的，setTimeOut和setInterval中的任務會被存到異步隊列中，等待同步隊列中的任務執行完成才會被加載執行，所以如果在同步隊列中遇到了執行非常緩慢的任務，那么異步隊列中的任務就只能等待了。但是如果這樣畫面就會出現卡頓，體驗很糟糕。
而requestAnimationFrame的出現就是為了解決這個問題，它是專門為實現高性能的幀動畫而設計的一個API，以每秒60幀的效率來渲染動畫，目前已在多個瀏覽器得到了支持，你可以把它用在 DOM 上的效果切換或者 Canvas 畫布動畫中。
在多個瀏覽器的兼容方法如下:

window.requestAnimaFrame = 
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
    window.setTimeout(callback, 1000 / 30);
};

使用實例如下