Javascript 繪圖

用 Javascript 繪製向量圖？真的假的？不信？先試試吧！

x1 y1 x2 y2

這裡就單單舉個畫直線的例子，原作為 Walter Zorn 展示及下載頁面，請點選這裡。

下載的文件中，只有一個檔案，名為 wz_jsgraphics.js，使用方法則為：

  1. 將 wz_jsgraphics.js 連結到文件中，例如：
    <script language="JavaScript" src="wz_jsgraphics.js"></script>
  2. 在文件中加入一個自訂的圖層，例如：
    <div id="myCanvas" style="position:absolute;height:0px;width:0px;"></div>
  3. 確定文件所有內容都載入了，加入以下程式碼
<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
//-->
</script>

注意紅字的對應，必需大小寫吻合。

這套程式組中，包含了許多功能，包括畫直線、畫圓、矩形等等，一個簡單的例子是：

<script language="JavaScript" src="wz_jsgraphics.js"></script>

<div id="myCanvas" style="position:absolute;height:0px;width:0px;"></div>
<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
jg.setColor('#0000FF');
jg.setStroke(3);
jg.drawLine(50,-300,500,800);
jg.paint();
//-->
</script>

setColor() 是用來指定顏色，以十六進位值代入；setStroke() 則是指定線條粗細，傳入數字即可，剩下的重點則是各種繪圖方法，例如 drawLine() 是畫直線，drawRect() 是繪製矩形等等，詳情請查看展示頁。

原作者提醒各位，使用時，真正執行動作的是 paint() 方法，所有指定的繪圖方法都設計完成，再一次執行 paint() 方法，以下是正確範例：

jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*...其他的繪製方法... */
jg.paint();

而以下則是不良使用方法：

jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();

神奇吧！