什麼是 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之間的值，代表漸變中開始點和結束點的位置。

該點位置的顏色

 <div class="logos">
                            <a href="http://shijiazhuang.changtu.com/" target="_blank"
                            >石家莊客運總站
                            </a>
</div>