以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

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();

神奇吧!

最近忙的要死,連松崗的新書邀約也都不敢答應下來,怎麼有時間研究這種東西呢?簡單講是匠子:我設計了一個 AJAX 下拉式選單,只要把目錄的 XML 內容寫好,就能使用了,聽起來不錯厚?改日再把這程式公布給各位(正計劃作個下載區),然後問題來了!那麼使用者怎麼自己設計 XML 呢?難不成要使用者用記事本來編輯?這對很多人而言,是一件痛苦的事,所以呢,又寫了個 XML 生成的程式,本來想作成 site map 的製作方式,拉一拉,點一點,一目瞭然,就 site map 之間的線,是個問題,看一下半半半成品吧! (不要新增太多功能,會 Lag 很兇,因為不停在繪圖)

就這東西了!是拿先前Javascript 拖拉放的程式,加上這個繪圖功能組成的,結論是:放棄以 site map 方式設計 XML 產生器了!

卜維丰 10/31 07'

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

   2017/7/22 上午 02:42:00

Hi there everyone, it's my first go to see at this website, and post
is really fruitful designed for me, keep up posting such articles.

hep c foot pain   2017/7/4 下午 03:16:00

First off I would like to say superb blog! I had a
quick question that I'd like to ask if you do not mind.
I was interested to know how you center yourself and clear your mind prior to
writing. I've had a tough time clearing my thoughts in getting my ideas out there.

I do take pleasure in writing however it just seems
like the first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any recommendations or hints?
Thanks!

foot pain after pregnancy   2017/6/24 下午 08:16:00

First off I want to say excellent blog! I had a quick question in which I'd
like to ask if you do not mind. I was curious to know how you center yourself and clear your thoughts before writing.
I have had a hard time clearing my mind in getting my thoughts out there.
I do enjoy writing however it just seems like the first 10
to 15 minutes are usually wasted just trying to figure out how
to begin. Any suggestions or hints? Many thanks!

gayeibric.jimdo.com   2017/5/19 上午 06:02:00

Very great post. I simply stumbled upon your blog and wanted to say that I have truly enjoyed surfing around your
weblog posts. In any case I will be subscribing on your rss feed and I'm hoping you write once
more soon!

manicure   2017/5/4 上午 04:21:00

Hi to all, the contents present at this web page are genuinely remarkable for people knowledge, well, keep
up the nice work fellows.

manicure   2017/5/3 下午 09:23:00

If you desire to obtain a good deal from this article then you have to
apply such methods to your won website.

BHW   2017/4/13 下午 10:58:00

I really like your blog.. very nice colors & theme.
Did you design this website yourself or did you hire someone to do it
for you? Plz answer back as I'm looking to design my own blog and would like to
find out where u got this from. thanks a lot

Alex   2011/6/9 上午 09:56:00

請問版主,
我執行到 var jg = new jsGraphics(cnv);
這段時,就會出現"必須要有物件",但我DIV有給ID呀.在中斷的地方,也有看到帶入的DIV的ID.
但為何還是出現這樣的錯誤?

handan   2008/7/3 下午 06:51:00

这种画图方法如果是动态的画图有问题

mousemove
drawline

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: