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

HTML5 也出來一段時(shí)間了，帶來了一些新的技術(shù)標(biāo)準(zhǔn)，例如 HTML5 里的 Canvas 標(biāo)簽，，允許我們使用 Javascript 在 canvas 標(biāo)簽里繪制 2D 或 3D 圖形和動畫。下面就談?wù)剬?canvas 繪圖的理解以及介紹其中一些使用過的方法，用一個(gè)條形進(jìn)度條和一個(gè)仿科幻文字做展示例子。

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

canvas 在 html 文檔中通過標(biāo)簽創(chuàng)建后是空白的，是一個(gè)固定大小的畫布，可以通過 width 和 height 控制它的寬高，默認(rèn)大小為300像素×150像素（px）。為了展示，首先需要找到渲染上下文，然后通過 js 在 canvas 上進(jìn)行繪制。 元素有一個(gè)叫做 getContext() 的方法，這個(gè)方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個(gè)參數(shù)，上下文的格式，對于 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() 方法來訪問繪畫上下文。看一個(gè)條形進(jìn)度條例子 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坐標(biāo)，寬和高。第一個(gè)條形是固定不動的，第二個(gè)條形的寬隨著speed的變動而變動，通過window.requestAnimationFrame循環(huán)調(diào)動drawFrame函數(shù)達(dá)到動畫的效果。requestAnimationFrame是一個(gè)新的API，作用與setTimeInterval一樣，不同的是它會根據(jù)瀏覽器的刷新頻率自動調(diào)整動畫的時(shí)間間隔。也別忘了要對畫布調(diào)用clearRect方法清除上一幀的圖案才能產(chǎn)生正確效果。繪制文本的 api 是，給圖形上色有兩個(gè)重要的屬性可以做到，分別是 fillStyle 和 strokeStyle。fillStyle 是設(shè)置圖形的填充顏色，strokestyle 是設(shè)置圖形的輪廓顏色，通過 fill() 和stroke() 方法，還有更多樣式設(shè)置可以參考 MDN 中的 canvas API。

第二個(gè)例子是仿科幻文字效果，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<>?",      //隨機(jī)文字
    wordsArray = words.split(""),         //將文字拆分進(jìn)一個(gè)數(shù)組
    fontSize = 18,                        //字體大小
    columns = canvas.width / fontSize,    //文字降落的列數(shù)
    drops = [];                           //文字行數(shù)

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++){
    // 隨機(jī)取文字
    var text = wordsArray[Math.floor(Math.random() * wordsArray.length)];
    // 繪制第n行文字
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    // 差異，數(shù)字越小差異越小
    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();
}())

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

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

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

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

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

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