1 ． 創建一個 jsGraphics 對象

a) 在頁面完全載入后繪制：

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

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

?

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

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

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

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

2. 圖形繪制函數

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

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

開始畫時應首先選擇畫筆顏色，否則，畫筆的顏色取默認值－黑色。坐標值作為繪制圖形方法的參數，如果采用上文的 a 方式構造圖形對象，那么坐標值是相對于 div 元素的左上角的。每一個畫布（圖形對象），它的 paint 方法必須被顯示的調用以產生 html 格式的圖形，否則，在你的屏幕上什么都不會發生。

?

?

函數名（方法） 示例代碼（用 jg 圖形對象）
setColor( "#HexColor" );
指定畫筆顏色，一旦設置后，這個顏色會一直保留，直到下一次再重新指定畫筆顏色，這個顏色值可以類似于 html 中的 #rrggbb 顏色表示，用名稱表示顏色也可以，例如：“ maroon ”

jg.setColor("#ff0000");

or with identical result

jg.setColor("red");

setStroke( Number );
指定畫筆采用的線厚度，這個厚度一旦被設置，會一直保留，直到下一次重新指定一，默認厚度是 1px.
要設置點劃線型，需要傳 Stroke.DOTTED 參數，點劃線型同樣適用于矩形，多邊型，折線和橢圓。

?

jg.setStroke(3);

or

jg.setStroke(Stroke.DOTTED);

drawLine( X1, Y1, X2, Y2 );
畫線。從第一個坐標點到第二個坐標點，線的厚度由 setStroke 設置。

jg.drawLine(20,50,453,40);

drawPolyline( Xpoints, Ypoints );
一條折線是一系列線段的集合， Xpoints 和 Ypoints 是每個點的 x 坐標和 y 坐標的數組集合，必須像下面這樣聲明：

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

var Xpoints = new Array(10,85,93,60);
var YPoints = new Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints);

drawRect( X, Y, width, height );

一個矩形的外邊線。參照左上角的坐標點，并指定矩形的寬度和高度。

jg.drawRect(20,50,70,140);

fillRect( X, Y, width, height );

填充矩形，參照左上角的坐標點，并指定矩形的寬度和高度。

jg.fillRect(20,50,453,40);

drawPolygon( Xpoints, Ypoints );
多邊形。 Xpoints 和 Ypoints 是每個點的 x 坐標和 y 坐標的數組集合，必須像下面這樣聲明：

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

如果始點和終點末被指定，多邊線將會自動閉合。

var Xpoints = new Array(10,85,93,60);
var Ypoints = new Array(50,10,105,87);
jg.drawPolygon(Xpoints, Ypoints);

Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.

fillPolygon( Xpoints, Ypoints );

填充矩形。參數作用見 drawPolygon()

jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));

drawEllipse( X, Y, width, height );

畫橢圓邊線。參照橢圓的外接矩形， x 和 y 是這個外接矩形的左上角坐標

jg.drawEllipse(20,50,70,140);
or
jg.drawOval(20,50,70,140);

fillEllipse( X, Y, width, height );
填充橢圓。參數見 drawEllipse()

jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141);

drawString( "Text", X, Y );

寫文本至由 x 和 y 坐標指定的位置。不同于 Java ，坐標值是第一行文本的左上角坐標值。如果文本中包含有 HTML 標記將被轉義，舉個例子：

"Some Text
more Text" 會被轉義為兩行

setFont( "font-family", "size+unit", Style );
在 drawString() 之前調用。指定字體，大小，樣式，字體和大小可以是與 HTML 中指示的一樣，至于樣式，可以使用的有：
Font.PLAIN 默認樣式，非粗體和斜體
Font.BOLD 粗體
Font.ITALIC 斜體

它們可以結合使用

jg.setFont("arial","15px",Font.BOLD);
jg.drawString("Some Text",20,50);

drawImage( "src", X, Y, width, height );
在指定的位置畫圖像， ”src” 參數指定圖像所在路徑， width 和 height 參數允許調整圖像寬高。

jg.drawImage("friendlyDog.jpg", 20,50,100,150);

paint();
必須顯示調用，才能真正在 html 頁面上畫圖形，不推薦每隔一段（每畫一個圖形）就調用一次。

像下面這樣的調用應該避免 :
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...

像下面這樣的調用性能會很高 :
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*... 還有其它畫的方法 ... */
jg.paint(); // 最后調用 paint()

jg.paint();

clear();

與圖形對象關聯的 div 畫布中的圖形被清除（在 div 中不是由這個圖形對象創建的內容是不會被改變的）

jg.clear();

setPrintable( true );

默認情況下，打印這些圖形是不太可行的，因為瀏覽器的默認打印設置中會關閉打印背景，調用 setPrintable() ，并設置參數為 true ，將重置圖形為可打印的（至少在 Mozilla/Netscape 6+ and IE 中）

jg.setPrintable(false);

總結

以上是生活随笔為你收集整理的js画矢量图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。