1. 程式人生 > >利用canvas繪制圖形

利用canvas繪制圖形

趨勢 增加 互聯網 所有 獲取 內部 曲線 必須 需要


繪制圖有很多種方法,可以借助flash實現,也可以使用SVG和VML來繪圖。本章將要學習一種新的繪圖方法——使用Canvas元素,它是基於HTML5原生的繪圖功能。使用Canvas元素,可以繪制圖形,也可以實現動畫。它方便了使用Javascript腳本的前端開發人員,寥寥的豎行代碼,就可以在Canvas元素中實現各種圖形及動畫。本章將介紹如何使用Canvas元素來繪制一些簡單的圖形。
本章主要知識點如下:
·認識Canvas元素
·使用Canvas繪圖
·Canvas與JavaScript之間的互動
·利用Canvas實現網頁中的動畫

10.1 認識Canvas
HTML5的Canvas元素有一套繪圖API(即接口函數),自成體系。
JavaScript就是通過調用這些繪圖API來實現繪制圖形和動畫功能的。
10.1.01 Canvas的歷史
在HTML5以前的標準中,有一個缺陷,就是不能直接動態地在HTML頁面中繪制圖形。若要在頁面中實現繪圖,或者是非常復雜的頁面實現(使用大量的Javascript代碼),要麽借助第三方工具實現(如Flash、SVG、VML等)。這種做法無疑是把問題復雜化了。

在互聯網應用不斷發展中,頁面繪制使用的越來越多。
在未來的發展趨勢上,也需要HTML自己完成繪圖功能,
Canvas元素應運而生。
Canvas元素是為了客戶端矢量圖形而設計的。
它自己沒有行為,但卻把一個繪圖API展現給客戶端Javascript;使腳本能夠把想繪制的東西都繪制到一塊畫布上。Canvas的概念最初有蘋果公司提出,並在Safari1.3Web 瀏覽器中首次引入。隨後Firefox 1.4 和 Opera9兩款瀏覽器都開始支持Canvas繪圖。目前IE9以上版本也已經支持這項功能。Canvas的標準化正由一個Web瀏覽器廠商的非正式協會在推進,目前Canvas已經成為HTML5草案中一個正式的標簽。

10.1.02 Canvas與SVG,以及VML之間的差異
Canvas有一個基於Javascript的繪圖API,而SVG和VML使用一個XML文檔來描述繪圖。Canvas與SVG,以及VML的實現方式不同,但在實現上可以互相模擬。
Canvas有自己的優勢,由於不存儲文檔對象,性能較好。
但若要移除畫布裏的圖形元素,往往需要擦掉繪圖從新繪制它。

10.2 Canvas基本知識
在網頁上使用Canvas元素,像使用其他HTML標簽一樣簡單,然後利用JavaScript腳本調用繪圖API,繪制各種圖形。
Canvas擁有多種繪制路徑、矩形、圓形、字符,以及添加圖像的方法,還能夠實現動畫。

10.2.01 構建Canvas元素
Canvas元素是以標簽的形式應用到HTML頁面上的。在HTML頁面中放入:
<canvas></canvas>
不過Canvas畢竟是個新東西,很多舊瀏覽器都不支持。為了增加用戶體驗,可以提供替代文字,放在Canvas標簽中。例如:
<canvas>你的瀏覽器不支持該功能!</canvas>
當瀏覽器不支持Canvas時,標簽裏的文字就會顯示出來。跟其他HTML標簽一樣,Canvas標簽有一些共同的屬性:
<canvas id="canvas" width="200" height="200">你的瀏覽器不支持Canvas標簽功能</canvas>
其中,id屬性決定了Canvas標簽的唯一性,方便查找。width和height屬性分別決定了Canvas的寬和高,其數值代表了Canvas標簽內包含了多少像素。
Canvas標簽可以和其他標簽一樣應用CSS樣式表。如果在頭部的樣式表中添加如下樣式:
canvas{
border:1px solid #CCC;
}
可以使用CSS樣式來控制Canvas的寬和高,但Canvas內部的像素點還是根據Canvas自身的width和height屬性確定,默認是寬300像素,高是150像素。用CSS設置Canvas尺寸;只能體現Canvas占用的頁面空間,但是Canvas內部的繪圖像素還是由width和height屬性來決定的。這樣會導致整個Canvas內部的圖像變形。

10.2.02 使用JavaScript實現繪圖的流程
Canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在Javascript中完成。前面講過,Canvas元素提供一套繪圖API。在開始繪圖之前,先要獲取Canvas元素的對象,再獲取一個繪圖上下文,接下來就可以使用繪圖API中豐富的功能了。
1.獲取Canvas對象
在繪圖之前,首先需要從頁面中獲取Canvas對象,通常使用document對象的getElementById()方法獲取。例如,以下代碼就是獲取id為“canvas”的Canvas對象。
var canvas = document.getElementById("canvas");
開發者還可以使用通過標簽名稱來獲取對象的getElementByTagName()方法。
2.創建二維的繪圖上下文對象。
Canvas對象包含了不同類型的繪圖API,還需要使用getContext()方法來獲取,接下來要使用的繪圖上下文對象。
var content=canvas.getContext("2d");
getContext對象是內建的HTML5對象,擁有<F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12>

10.3 使用Canvas繪圖
10.3.01 繪制矩形
10.3.02 繪制路徑
10.3.03 圖形組合
10.3.04 繪制曲線
10.3.05 使用圖像
10.3.06 剪切區域
10.3.07 繪制漸變
10.3.08 描邊屬性
10.3.09 模式
10.3.10 變換
10.3.11 使用文本
10.3.12 陰影效果
10.3.13 狀態保存與恢復
10.3.14 操作像素

利用canvas繪制圖形