文章出處

介紹

傳統的HTML主要用于文本的創建，可以通過<img>標簽插入圖像，動畫的實現則需要第三方插件。在這方面，傳統的HTML極其缺乏滿足現代網頁多媒體需求的能力。HTML5的到來，帶來了新的成員<canvas>標簽。

什么是 Canvas？

HTML5 的 Canvas 元素使用 JavaScript 在網頁上繪制圖像。

畫布是一個矩形區域，你可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

創建 Canvas 元素

向 HTML5 頁面添加 Canvas 元素。

規定元素的 id、寬度和高度：

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

通過 JavaScript 來繪制

Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

首先，JavaScript 使用 id 來尋找 Canvas 元素：
```
var c=document.getElementById("myCanvas");
```
其次，創建 context 對象：
```
var cxt=c.getContext("2d"); 
```
然后，getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個紅色的矩形：
```
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 
```
最后，使用fillStyle 方法，可將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

繪圖方法：

線條以及填充
- moveTo（）方法使用X和Y作為參數，在 Canvas 上設置參數指定的線條起始點。
- lineTo（）方法使用X和Y作為參數，在 Canvas 上創建上一個點到參數指定點的路徑。
- stroke（）方法繪制出了 Canvas 上，moveTo（）指定的點到 lineTo（）指定點的路徑線條。stroke（）方法沒有參數。
- beginPath（）方法用于開始一個新路徑或重置當前路徑，沒有參數。
- closePath（）方法用于創建從起始點到終點的路徑，有效的閉合并形成路徑的形狀，沒有參數。
- fill（）方法用于為當前的路徑填充樣式。

JavaScript 代碼：

<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.moveTo(250,50);
context.lineTo(150,100);
context.lineTo(250,150);
context.closePath();
context.stroke();
context.fill();
</script>

文本

HTML5 提供了3個屬性 font、textAlign 和 textBaseline，用于定義 Canvas 上文本的不同狀態。

- font 屬性設置或獲取字體屬性，如字體樣式、字重、字體大小和字體系列等。它遵循和 CSS 字體屬性相同的語法。
- textAlign 屬性設置或獲取文本內容的水平對齊方式。textAlign 可以設置成5個值："start", "end", "right", "left" 和 "center"
- textBaseline 屬性設置或獲取文本內容的垂直對齊方式。textBaseline 可以設置成5個值："top", "bottom", "middle", "aplhabetic" 和 "hanging"。

漸變
- strokeStyle 屬性設置或獲取 Canvas 上用于繪制路徑的顏色、漸變和圖案。
- createLinearGradient（）方法通過將對象以值的形式分配給 strokeStyle 或者相關圖形的填充屬性，用于創建填充舉行，圓形，線條和文本的漸變對象。

createLinearGradient有4個參數：

- - 起點的X坐標
  - 起點的Y坐標
  - 終點的X坐標
  - 終點的Y坐標
- createLinearGradient（）方法必須與 addColorStop（）方法一起使用，來指定漸變對象中的不同顏色和相對的位置。
- addColorStop（）方法指定了漸變對象的顏色和位置。

addColorStop（）有2個參數：

- - 一個0.0到1.0之間的值，代表漸變中開始點和結束點的位置。
  - 該點位置的顏色

JavaScript 代碼：

<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(50,30,50,170);
gradient.addColorStop(0,"red");
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.3","yellow");
gradient.addColorStop("0.5","green");
gradient.addColorStop("0.7","blue");
gradient.addColorStop("0.9","indigo");
gradient.addColorStop(1,"violet");
context.fillStyle=gradient;
context.fillRect(50,30,250,140);
</script>