Canvas動畫入門(1) 開始畫圖吧!

• 首先，準備好一個Html檔案，像是這樣：

1. document.getElementById
   這是HTML DOM的方法之一，允許你取得Html上的元素，並在Javascript中修改元素的屬性(寬、高、字體大小等等)
2. getContext("2d")
   取得Canvas元素後，以此2D物件來進行繪圖（只是一直都沒有準備開發3D的跡象就是了xd）
3. Canvas Reference
   這是Canvas內建的語法，允許你以2D的方式繪圖，擁有許多不同的繪圖方式，今天會從最簡單的矩形－Rectangles來嘗試

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

　　var c = document.getElementById("Cava");
　　var ctx = c.getContext("2d");

　　context.beginPath(); //提筆
　　context.fill(); //著色 (填滿)
　　context.beginPath(); //提筆
　　context.stroke(); //著色 (外框)
　　//......

Rectangles －今天會用到的四種矩形工具/函式

1. rect()　　　　 －路徑
2. fillRect()　　　 －路徑＋填滿
3. strokeRect()　　－路徑＋外框
4. clearRect()　　 －清除路徑（橡皮擦）

context.beginPath();
context.rect(100, 100, 100, 100);
context.fillStyle = "#A67F78";
　　 context.fill(); //填滿

　　context.fillStyle = "#32435F";
　　context.fillRect(150,300,100,100);

　　context.strokeStyle = "#32435F";
　　context.strokeRect(200,400,100,100);

var W = window.innerWidth;
var H = window.innerHeight;
context.clearRect(0, 0, W, H);

• window.requestAnimationFrame
  簡單來說，如果你的電腦顯示禎數有60次，那麼，每次要刷新畫面之前，都會透過這個函式先行呼叫，如果把上述所有繪圖的程式碼，包成一個函式，就可以讓使用者每一禎都看到畫面的改變，避免因重繪的次數過少而閃爍，或過多而浪費效能。