用wz_jsgraphics.js（javascript圖形庫）進行畫向量圖,相容多瀏覽器

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

★ 瀏覽器的相容性

Linux 系統 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

Windows 系統 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

說明：如果在網頁全部載入完成後，使用這個向量圖形庫進行繪製，在 Opera 版本 7 以前的瀏覽器中不會執行， Netscape 版本 4 也不會執行。相反，當 HTML 頁面正在被解析時，使用這個圖形庫進行繪製是全部瀏覽器均能做到的。

★ 怎樣使用這個向量圖形庫？

1 ．包含這個庫

插入下面的代碼到你的 html 檔案的開頭部分（在 <head> 和 </head> 之間）：

2 ．使用層（ div 或 layer ）作為畫布（ canvases ）
如果是當頁面正被載入時，直接在 html 頁面中繪製，那麼這個步驟不是必須的。

如果在頁面載入完成後繪製，應該設定幾個具有絕對座標的層，作為你的畫布，每一個層應該有一個唯一的 id:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>

3 ．下載並儲存這個圖形庫

到這個地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下載，將解壓後的 wz_jagraphics.js 與你的 html 檔案放至相同的目錄中，如果你的 wz_jagraphics.js 與 html 檔案處於不同的目錄下，記得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相對路徑。

★ 怎樣使用這個向量圖形庫中的繪製函數？

1 ． 建立一個 jsGraphics 對象

a) 在頁面完全載入後繪製：

（這種方式不會在 Netscape 版本 4 和 Opera 版本小於 7 的瀏覽器中執行）

還記得前面用 div 元素建立的畫布嗎？看下面的樣本，需要為 div 建立相應的 jsGraphics 對象，這些代碼必須插入到相關的 div 元素結束標誌 </div> 後面，但必須在 </body> 的前面， div 元素的 id 作為 new jsGraphics(); 的構造參數，像下面這樣：

var jg = new jsGraphics("myCanvas");

//-->
</script>

如果有多個 div 元素，每一個 div 都需要有它自已的 jsGraphics 對象：

var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

//-->
</script>

b ）在頁面載入的時候繪製
（在 Netscape 4 和 Opera 5/6 可以執行）

只需要將構造參數設為空白：

var jg_doc = new jsGraphics();

//-->
</script>

你可以選擇 jg,jg2 或 jg_doc 其它的變數名，只要不違反 Javascript 的命名規則就可以。

2. 圖形繪製函數

為確保所有瀏覽器能正確執行，這裡選擇頁面載入時進行繪製，即上文的 b 方式

一旦產生這些繪圖物件（在這個樣本中 jg, jg2 或 jg_doc ），就可以使用它來調用繪製圖形的方法。由繪圖物件所繪製的圖形將會在相關的 div 元素上顯示（採用上文 a 方式構造繪圖物件）：

jg.setColor("#ff0000"); // 選擇紅色
jg.drawLine(10, 113, 220, 55); // 座標點相對於 div 元素 "myCanvas"
jg.setColor("#0000ff"); // 選擇藍色
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff"); // 選擇藍色
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();
}

var jg_doc = new jsGraphics(); // 直接在文檔上繪製
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>

開始畫時應首先選擇畫筆顏色，否則，畫筆的顏色取預設值－黑色。座標值作為繪製圖形方法的參數，如果採用上文的 a 方式構造繪圖物件，那麼座標值是相對於 div 元素的左上方的。每一個畫布（繪圖物件），它的 paint 方法必須被顯示的調用以產生 html 格式的圖形，否則，在你的螢幕上什麼都不會發生。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More