HTML5基礎，第4部分：點睛之筆Canvas

（譯者注：由於yeeyan編輯器對文章中的標簽做解析的原因，我在每個標簽的<符號之後都加入了一個空格，比如說，左尖括號<+head+右尖括號>，我會寫成< head>，以便其能夠在文章中正確顯示，不便之處敬請諒解。）

使用HTML5來編寫代碼的人，有著設計者和開發者雙重身份的強悍組合，其職責是構造出高效的富互聯網應用（rich Internet application，RIA），特別是豐富的用戶界面。就高效這個字眼來說，我的意思是指系統級的和系統性的創造力增強，這種增強以數字化的方式促進了站點所有者、所有者的代理機構和站點用戶之間的對話。

RIA是用戶獲得滿意體驗的來源之處和媒介，因此，它是任何成功的以網絡為中心的風險投資的重要組成部分。以網絡為中心的活動，就性質來說，或多或少都是協作式的。公司要在包括了市場營銷和管理的各個層面都取得成功的話，數字化協作的制勝方法是至關重要的。很多時候的很多情況都取決於效率，網站要依靠效率來滿足其訪問者的品質期望。

正如你已經見到的那樣，HTML5是為這一具有跨平台能力、融合了通信、使用統一語言、提供無處不在的計算，以及基於開放系統的協作式“一網化世界（one web world）”量身定做的。這一文章系列的前面三部分內容重點關注語義、正確的編碼方法、輸入在極為重要的轉化過程中的作用，以及站點管理最佳做法等，所有這些的目的都是在為以一種有組織和符合邏輯的方式來創建RIA奠定基礎。每篇文章中都共有的一個主題是，對於實現網站所有者的機構目標來說，制造並管理豐富的用戶體驗是至關重要的。

什麼是Canvas?

HTML5 Canvas（畫布）是一個非常有用的繪圖和動畫元素，Canvas使用JavaScript來直接在頁面上繪制圖形。這是一個由你來定義和控制的長方形區域，該區域允許動態、可腳本渲染的2D圖形和位圖圖像。

在制作用來增強UI、示意圖、相冊、圖表、圖形、動畫和嵌入式繪圖應用的那些非常棒的視覺材料方面，HTML5堪稱完美。Canvas元素有一些用來繪制路徑、矩形、圓形和字符的方法。

Canvas的坐標

在畫布上繪圖的一個先決條件是要熟悉網格或是坐標空間，寬度和高度的空間區域測量是以像素為單位給出的。畫布是基於x和y坐標的使用來構建的，畫布的x=0, y=0坐標位於左上角。

畫布的矩形區域的默認屬性是300像素的寬度和150像素的高度，但你可以通過指定寬度和高度來確定畫布元素的確切大小。圖1中的示意圖說明了x和y坐標的實現方式。

圖1. Canvas的坐標

圖1給出了一個100像素X100像素的畫布區：