摘要：然后在節點上設置了動畫屬性，并將其設為前面定義的動畫，每一次動畫秒，表示無限循環，表示緩動方式，兩個關鍵幀之間的變化是方式逐步變化的。

平時工作中會遇到需要實現一些存在動畫的頁面。這里對動畫的實現知識做一個整理。
頁面動畫的實現可以分為兩類：CSS動畫、Canvas動畫、JavaScript動畫。JavaScript動畫沒啥好講的，這里就不整理了。

CSS3中提供了一個屬性transition，用來實現CSS樣式的平滑變化。舉個例子:

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s;
}
.box:hover {
  width: 300px;
}

當鼠標hover到.box元素時，元素會在1s內逐漸的將寬度變化到300px。
具體效果可以去這里查看。

使用transition可以實現較為簡單的動畫。如果需要實現比較復雜的動畫，可以使用amination來實現。舉個例子：

@keyframes cssAmination {
  0%   {background: red; transform: skew(0deg);}
  25%  {background: yellow; transform: skew(-20deg);}
  50%  {background: blue; transform: skew(0deg);}
  75%  {background: green; transform: skew(20deg);}
  100% {background: red; transform: skew(0deg);}
}
.amin {
  animation: cssAmination 1s infinite ease;
}

在上的例子中，首先由keyframes定義一個動畫叫做: cssAnimation。在cssAnimation中定義了動畫過程中關鍵的5幀。每一幀都設置了當前幀的樣式特征。然后在.amin節點上設置了動畫屬性animation，并將其設為前面定義的動畫cssAnimation，每一次動畫1秒，infinite表示無限循環，ease表示緩動方式，兩個關鍵幀之間的變化是ease方式逐步變化的。
具體效果可以到這里查看

animation的緩動函數有很多類型的值，有一個值比較特別就是step[n[, start | end]]。step的效果是將keyframes中的每一個關鍵幀之間的切換并不是逐步變化的，而是到達某一關鍵幀后直接變化成新的關鍵幀樣式，并保持不變，直到下一關鍵幀。所以使用step可以實現CSS3的幀動畫。寫法如下：

@keyframes cssFrameAmination {
  0% {background-position: 0 0;}
  25% {background-position: -100px 0;}
  50% {background-position: -200px 0;}
  75% {background-position: -300px 0;}
  100% {background-position: -400px 0;}
}
.amin-frame {
  background: url("./sprite.png") 0 0 no-repeat;
  animation: cssFrameAmination 1s infinite step(5, start);
}

在上面的例子中，設置動畫cssFrameAmination，其中每一關鍵幀都是精靈動畫圖片的一幀圖片。然后在animation中設置animation-timing-function為step(5, start)表示動畫分5幀。

有關CSS3動畫相關的知識細節可以去這里了解。

canvas是一個HTML標簽，用于提供給腳本進行畫圖圖形的繪制。canvas的繪制主要由CanvasRenderingContext2D的實例來進行繪制。CanvasRenderingContext2D 可以通過canvasDOM對象的getContext獲得，代碼如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

getContext的參數是指在畫布上繪制的類型，"2d"表示繪制二維圖形。目前三維還沒有實現，所以參數只支持"2d"。

canvas的上下文提供了眾多的繪制方法。當你繪制一個圖形時，基本思路是這樣的：

調用save方法保存之前的樣式狀態

調用beginPath表示開始設置路徑

調用fillStyle, strokeStyle等對接下來的路徑進行樣式設置

調用moveTo，lineTo, rect, arc等設置路徑

調用closePath閉合路徑

調用fill或者stroke對路徑進行繪制

調用restore恢復之前保存的樣式狀態

上面過程中的save和restore的作用是將已經設置的樣式進行保存和恢復。當存在多個圖形時，前面的樣式如果不恢復為默認樣式，會影響到第二個圖形的樣式。使用save和restore可以保證每一個圖形在繪制開始時，都是默認的樣式。當然，你也可以不調用save和restore，而是通過將前面已經設置過的所有樣式進行逐個的還原。
save可以保存的樣式類型有：

當前應用的變形（即移動，旋轉和縮放）

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

當前的裁切路徑（clipping path）

步驟5closePath盡量不要忘記。原因和save，restore類似，如果忘記調用closePath就會導致前后圖形間多繪制一根線。
我寫了一個時鐘的例子：github

下面對各類接口做了一個整理
樣式設置

路徑

繪制

清除

文字

樣式保存

canvas雖然可以繪制圖形，但是最常用的應該是繪制圖片。圖片的繪制和圖形的繪制類似。
canvas使用接口drawImage()進行接口繪制，接口定義如下:

drawImage(image, x, y, width, height, dx, dy, dWidth, dHeight);

其中的參數定義如下：

image可以使HTMLImageElement, HTMLVideoElement（Video元素的某一幀）, HTMLCanvasElement, ImageBitmap。

x, y是指圖片截取的起始位置。

width, height是指圖片截取的寬高。

dx, dy是目標在Canvas中的起始坐標。

dWidth, dHeight用于控制canvas繪制的圖片的縮放大小。

canvas還可以和CSS一樣對圖形進行變形轉化。接口列表如下：

前面的例子中，當兩個圖形重疊后，都是由后面繪制的圖形覆蓋住前面繪制的圖形。有時候需要改變這種情況。這種時候就可以使用globalCompositeOperation來進行設置（還可以用來遮蓋，清除某些區域）。具體參數可以去這里查看

globalCompositeOperation: type

使用上面的接口可以在canvas上繪制圖片，但是都是固定的。當我們不斷的對canvas進行重繪時，就可以達到動畫的而效果。

動畫的幀率達到60幀每秒時，也就是16ms沒幀時，動畫過程是流暢的。所以我們要對動畫過程的繪制進行控制。有三個方法可以進行控制：

setInterval。設置每16ms執行一次繪制過程。但是該方法存在一個問題，開始運行繪制函數的時間點可能處于某一幀的快結束時間點。這個時候繪制過程需要小于16ms才可以達到流暢。

setTimeout。和setInterval類似。

requestAnimationFrame。該方法會在瀏覽器每一次繪制結束后調用一次。使用該方法可以很好的避免setInterval和setTimeout出現的運行繪制函數時間不在每一幀開始的時間點。

創建一個離屏canvas, 預先對復雜圖形進行繪制。

避免浮點數的坐標點, 使用Math.floor()對坐標取整。

不要使用drawImage去縮放圖片。

使用多canvas繪制復雜場景。

使用CSS設置大背景圖。

查了很多資料，發現Chrome 44版本之前是有Canvas調試功能的，但是Chrome 44之后，將Canvas調試功能去除了，并以擴展接口的方式提供功能。找了很久沒有找到調試Canvas的擴展。另外，Firefox有提供專門的Canvas調試面板。試用了下，功能太少，對定位問題并沒什么軟用。
所以，關于調試的問題，只能試用傳統的設斷點，并逐步運行看效果進行調試。