什麼是Canvas？

<canvas> 元素

HTML5 <canvas> 元素用於圖形的繪製，通過腳本 (通常是JavaScript)來完成。

<canvas> 標籤只是圖形容器，您必須使用腳本來繪製圖形。

getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。

你可以通過多種方法使用 Canvas 繪製路徑、盒、圓、字符以及添加圖像。

<canvas> 元素定義如下：

<canvas id="myCanvas" width="200" height="100">
</canvas>

標籤通常需要指定一個id屬性 (腳本中經常引用)，width 和 height 屬性定義的畫布的大小。

提示：瞭解和使用 Canvas 需要基本瞭解 JavaScript 的基本知識。

Canvas 座標

canvas 是一個二維網格。

canvas 的左上角座標爲 (0,0)。

X 座標向右增加。

Y 座標向着畫布底部增加。

Canvas 的使用

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標

在canvas中繪製圓形, 我們將使用以下方法:

arc(x,y,r,start,stop)

Canvas - 文本

使用 canvas 繪製文本，重要的屬性和方法如下：

font - 定義字體
fillText(text,x,y) - 在 canvas 上繪製實心的文本
strokeText(text,x,y) - 在 canvas 上繪製空心的文本

Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數使用座標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值爲 漸變，然後繪製形狀，如矩形，文本，或一條線。

Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

drawImage(image,x,y)

畫布的使用

Canvas 元素可以被轉換。

例如，在座標 (20, 40) 的畫布上寫入文本。

ctx.font="bold 20px Arial";
ctx.textAlign="Hello W3Cschool";
ctx.fillText("Hello W3Cschool", 20, 40);

translate(x,y) 方法用於移動 Canvas。

x 表示水平移動網格的距離, y 表示垂直移動網格的距離。

ctx.translate(100, 150);
ctx.fillText("after translate", 20, 40);

在此例子中，畫布向右移動100像素，向下移動150像素。

rotate() 方法

rotate() 方法用於旋轉 HTML5 畫布。

下面是在設置旋轉之前和之後繪製相同矩形的例子:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10, 100, 100);

ctx.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.

ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 100, 100);

運行顯示結果如下圖所示：

scale() 方法

scale() 方法縮放當前繪圖至更大或更小。

注意：如果你對繪圖進行縮放，所有之後的繪圖也會被縮放。定位也會被縮放。如果你設置 scale(2,2)，那麼繪圖將定位於距離畫布左上角兩倍遠的位置。

實例
繪製一個矩形；放大到2倍，再次繪製矩形；放大到2倍，再次繪製矩形；放大到2倍，再次繪製矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

運行顯示結果如下圖所示：

SVG 與 Canvas 的區別

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

特點：

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用

Canvas

Canvas 通過 JavaScript 來繪製 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

特點：

依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪