摘要：使用標簽來繪制圖形或動畫需要掌握一些基本的和知識，通過的和了解繪圖的原理即可。通過不斷的擦出和重繪，就會出現動作效果，通過加快速度不被人眼識破。清除畫布通過方法來為元素得到對象。

HTML5 也出來一段時間了，帶來了一些新的技術標準，例如 HTML5 里的 Canvas 標簽，，允許我們使用 Javascript 在 canvas 標簽里繪制 2D 或 3D 圖形和動畫。下面就談談對 canvas 繪圖的理解以及介紹其中一些使用過的方法，用一個條形進度條和一個仿科幻文字做展示例子。

元素不被一些老的瀏覽器所支持，但是所有的主流瀏覽器的新近版本都支持，兼容性問題尚好。使用 canvas 標簽來繪制圖形或動畫需要掌握一些基本的 HTML 和 JavaScript 知識，通過 canvas 的 api 和了解 canvas 繪圖的原理即可。其實 canvas 上的動作的原理和顯示器中動作原理是一樣的，都是一幀一幀繪制靜態圖形，繪制刷新的速度超過了我們的人眼識別速度，所以看上去就像真的在動一樣。不同點是顯示器的刷新是實時的，而 canvas 的刷新需要我們通過 js 控制來手動進行觸發，如果只是繪制簡單的靜態圖形，那么這一步就不需要我們手動控制進行刷新了。比如說我們想要一個矩形從左邊移到右邊，開始時可以讓矩形在最左邊，然后下一秒時再往右一些繪制相同的矩形，但是前提是先把原來的矩形給去掉，再重新繪制。通過不斷的擦出和重繪，就會出現動作效果，通過加快速度不被人眼識破。

canvas 在 html 文檔中通過標簽創建后是空白的，是一個固定大小的畫布，可以通過 width 和 height 控制它的寬高，默認大小為300像素×150像素（px）。為了展示，首先需要找到渲染上下文，然后通過 js 在 canvas 上進行繪制。 元素有一個叫做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式，對于 2D 圖像而言，填入 "2d" 字符串。

var canvas = document.getElementByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);

通過 document.getElementByTagName() 方法來為 元素得到 DOM 對象。通過 DOM 元素上的getContext() 方法來訪問繪畫上下文。看一個條形進度條例子 https://codepen.io/zgfrank/pe...

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    centerX = canvas.width/2,
    centerY = canvas.height/2,
    speed = 0.1;

function text(n){
  context.save();
  context.fillStyle = "#F47C7C";
  context.font = "40px Arial";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText(n.toFixed(0)+"%", centerX, centerY);
  context.restore();
}

function rectfixed(){
  context.beginPath();
  context.rect(50, 140, 400, 20);
  
  context.lineWidth = 1;
  context.strokeStyle = "white";
  context.fillStyle = "white";

  context.fill();
  context.stroke();
}

function rectmove(speed){
  context.beginPath();
  context.rect(50, 140, speed*4, 20);

  context.lineWidth = 1;
  context.fillStyle = "#F47C7C";

  context.fill();
  context.stroke();
}


(function drawFrame(){
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);

  text(speed);
  rectfixed()
  rectmove(speed)
  if(speed > 100) speed = 0;
  speed += 0.2;
}());

從代碼上看，首先繪制矩形的 api 是 context.rect(x, y, width, height)，分別是x/y坐標，寬和高。第一個條形是固定不動的，第二個條形的寬隨著speed的變動而變動，通過window.requestAnimationFrame循環調動drawFrame函數達到動畫的效果。requestAnimationFrame是一個新的API，作用與setTimeInterval一樣，不同的是它會根據瀏覽器的刷新頻率自動調整動畫的時間間隔。也別忘了要對畫布調用clearRect方法清除上一幀的圖案才能產生正確效果。繪制文本的 api 是，給圖形上色有兩個重要的屬性可以做到，分別是 fillStyle 和 strokeStyle。fillStyle 是設置圖形的填充顏色，strokestyle 是設置圖形的輪廓顏色，通過 fill() 和stroke() 方法，還有更多樣式設置可以參考 MDN 中的 canvas API。

第二個例子是仿科幻文字效果，https://codepen.io/zgfrank/pe...

var canvas = document.querySelector("#test"),
    ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth,
    canvas.height = window.innerHeight;

var shadowColor = "rgba(0, 0, 0, 0.08)",  //用于覆蓋文字的漸變陰影
    textColor = "#33ff33",                //文字顏色
    words = "0123456789qwertyuiopasdfghjklzxcvbnm,./;"[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?",      //隨機文字
    wordsArray = words.split(""),         //將文字拆分進一個數組
    fontSize = 18,                        //字體大小
    columns = canvas.width / fontSize,    //文字降落的列數
    drops = [];                           //文字行數

for(var i = 0; i < columns; i++){
  //從第一行開始
  drops[i] = 1;
}

function drawText(){
  ctx.save();
  ctx.fillStyle = textColor;
  ctx.font = fontSize + "px arial";
  
  for (var i = 0; i < drops.length; i++){
    // 隨機取文字
    var text = wordsArray[Math.floor(Math.random() * wordsArray.length)];
    // 繪制第n行文字
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    // 差異，數字越小差異越小
    if (drops[i] * fontSize > canvas.height && Math.random() > 0.99){
      drops[i] = 0;
    }
    drops[i]++;
  }
  ctx.restore();
}

(function drawFrame(){
  window.requestAnimationFrame(drawFrame, canvas);
  // 陰影覆蓋文字
  ctx.fillStyle = shadowColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  drawText();
}())

上面的代碼就是實現該效果的關鍵：通過 fillText() 方法來繪制隨機的字符，通過 fillRect() 方法覆蓋一個帶有透明度的黑色矩形實現文字被覆蓋形成陰影的效果。繪制列數是 canvas 寬度 / 字體大小。在繪制函數中，最開始是一行行繪制，所以創建drop數組一開始都為1，為了從第一行開始繪制，因此剛刷新的時候是從第一行繪制到最后一行。

context.fillText(text, i * fontSize, drops[i] * fontSize);

fillText() 有三個參數，第一個是繪制的隨機文字，第二是文字的 X 起始坐標，三是文字的 Y 起始坐標。所以第一行每個文字的 X 軸坐標是 0, 18, 36...，而 Y 軸坐標為 18, 18, 18, ...。繪制第二行則將 drops 數組的值都加 1 ，即第二行的 Y 軸坐標為（32，32，32...）。依次類推，從第一行到最后一行就繪制了滿屏的文字，通過 fillRect() 加上覆蓋的黑色透明矩形，就有點類似實現了漸變陰影的文字向下運動動畫。為了顯示重復繪制的效果，需要設置當繪制到最后一行了，需要從第一行開始繪制：

if (drops[i] * fontSize > canvas.height ){
    drops[i] = 0;
}

但是這樣我們會發現，每一行文字都是同時繪制的，沒有差異性，這樣不能達到不同列錯落有致的效果。為了顯示出每一行文字的差異性，就必須讓一些列先從第一行開始繪制，一些列后面再從第一行開始繪制，怎么達到呢，可以增加隨機數，同時判斷隨機數和是否繪制到了最后一行，同時滿足的列才開始從第一行繪制：

if (drops[i] * fontSize > canvas.height && Math.random() > 0.99){
    drops[i] = 0;
}