首頁 > 開發者 > JavaScript

javascript畫圖庫

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

在http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm找到一個javascript的畫圖庫。

相關的函數調用說明如下：

 

設定畫筆顏色
setColor("#HexColor");
樣本：
jg.setColor("#ff0000");
或
jg.setColor("red");
如果沒有設定畫筆顏色，則預設用黑色來畫。
參數缺少時會出錯。參數為非顏色值時也會出錯（防錯這一塊，該庫做得不是非常完善）。

 

設定畫筆寬度
setStroke(Number);
樣本：
jg.setStroke(3);
或
jg.setStroke(Stroke.DOTTED); //點線
如果沒有設定畫筆寬度，預設是1點寬。寬度是指從一邊到另一邊的點數，設為3，就是准準的3點

，而不是5點。Stroke.DOTTED為虛線，線的寬度為1。Stroke.DOTTED也可以用-1來代替，其它負

值時，都是1點實線。

 

畫線
drawLine(X1, Y1, X2, Y2);
樣本：
jg.drawLine(20, 50, 453, 40);
如果後面的一個點座標沒有提供，不會出錯，但結果不一定正確，只能設點模式為Stroke.DOTTED

時，相當於畫一個點，而其它的，則會跑到Y軸上。

 

畫折線
drawPolyline(Xpoints, Ypoints);
樣本：
var Xpoints = new Array(10, 85, 93, 60);
var Ypoints = new Array(50, 10, 105, 87);
jg.drawPolyline(Xpoints, Ypoints);
如果X座標與Y座標數量不匹配，不會出錯，但不匹配的點畫不出線，只畫出雜亂的點。

 

畫框
drawRect(X, Y, width, height);
樣本：
jg.drawRect(20, 50, 70, 140);
實際寬度是width+pixel，而不是width+2*pixel。中間空白的寬度是width-pixel。頂點不管線寬

，總是(X, Y)。
後面寬度與高度缺少，畫出幾個雜亂的點。

 

填充地區
fillRect(X, Y, width, height);
樣本：
jg.fillRect(20, 50, 453, 40);
與drawRect不同，實際寬度就是width。
以下畫出兩種顏色的框，中間還帶一像素的背景色。
 jg.setStroke(3);
 jg.drawRect(20, 50, 70, 140);
 jg.setColor("blue");
 jg.fillRect(24, 54, 65, 135);

 

畫手繪多邊形（封閉折線）
drawPolygon(Xpoints, Ypoints);
樣本：
var Xpoints = new Array(10, 85, 93, 20);
var Ypoints = new Array(50, 10, 105, 87);
jg.drawPolygon(Xpoints, Ypoints);
如果參數中最後一個點不匹配，則畫出折線，而不封閉。

 

填充手繪多邊形
fillPolygon(Xpoints, Ypoints);
樣本：
jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));
不錯，這都能正確地填充好。

 

畫橢圓
drawEllipse(X, Y, width, height);
樣本：
jg.drawEllipse(20, 50, 70, 140);
或
jg.drawOval(20, 50, 70, 140);
要畫圓，則是寬與高一樣就行。

 

填充橢圓
fillEllipse(X, Y, width, height);
樣本：
jg.fillEllipse(20, 50, 71, 141);
或
jg.fillOval(20, 50, 71, 141);

 

畫弧
fillArc(X, Y, width, height, start-angle, end-angle);
樣本：
jg.fillArc(20, 20, 41, 12, 270.0, 220.0);
總是從前面的角度順時針轉到後面的角度，即使前面的角度大於後面的角度

 

設定字型
setFont("font-family", "size+unit", Style);

輸出文字
drawString("Text", X, Y);
樣本：
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("Some Text", 20, 50);
字型樣式有以下幾種值：PLAIN、BOLD、ITALIC、ITALIC_BOLD、BOLD_ITALIC

 

固定地區輸出文字
drawStringRect("Text", X, Y, Width, Alignment);
樣本：
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("Text", 20, 50, 300, "right");
Alignment的內容就是CSS中text-align的內容：left、right、center、justify

 

輸出影像檔
drawImage("src", X, Y, width, height);
樣本：
jg.drawImage("Dog.jpg", 20, 50, 100, 150);
如果有寬度與高度，就會把映像拉長或壓縮，如果沒有，則顯示映像的原大。

 

畫的結果顯示出來
paint();
樣本：
jg.paint();
以上的畫圖代碼，直到這個語句時才顯示出來。

 

清除畫板
clear();
樣本：
jg.clear();

 

設為可列印的
setPrintable(true);
樣本：
jg.setPrintable(true);
如果沒有設定可列印，則畫出來的映像列印不出來。設為true後，paint出來的圖才能列印出來。

如果設為false，則這部分paint的就不能列印了。而文字與映像不管如何設定，都可以列印出來

。

 

樣本的HTML檔案

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>TEST</title>
 <script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script>
</head>
<body>
 <input id="ButDraw" value="Draw" type="button" onclick="ButDraw_Click();" />
 <div id="test" style="color:blue; LEFT: 0px; OVERFLOW: visible; WIDTH: 400px; POSITION: relative; TOP: 0px; HEIGHT: 250px;

background:#EEEEEE; "></DIV>
 <script type="text/javascript">
var jg=new jsGraphics("test");

function ButDraw_Click()
{
 if (window.event) event.cancelBubble = true;
 jg.setColor("#FF00FF");
 jg.setStroke(1);
 jg.setPrintable(false);

 

 jg.drawLine(10, 10, 100, 100);

 

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

 

 jg.setStroke(3);
 jg.drawRect(20, 50, 70, 140);
 jg.setColor("blue");
 jg.fillRect(24, 54, 65, 135);

 

 var Xpoints = new Array(10, 85, 33, 20);
 var Ypoints = new Array(50, 30, 105, 87);
 jg.drawPolygon(Xpoints, Ypoints);

 

 jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));

 

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

 

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

 

 jg.fillArc(20, 20, 40, 40, 220.0, 270.0);

 

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

 

 jg.drawRect(20, 50, 300, 140);
 jg.setFont("verdana", "11px", Font.BOLD);
 jg.drawStringRect("Text", 20, 50, 300, "right");

 

 jg.drawImage("but04.gif", 20, 50);

 

 jg.paint();

 

 //jg.clear();
}

 </script>
</body>
</html>

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

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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