javascript畫圖庫

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

上載者：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 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

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