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

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

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

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


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


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

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

卜維丰 10/31 07'



Kandace   2017/11/21 下午 11:20:00

Hi there! I could have sworn I've been to this blog before but after checking through some of the post I realized
it's new to me. Nonetheless, I'm definitely happy I found it and I'll be
bookmarking and checking back frequently!

home alarm systems consumer reviews   2017/11/16 下午 04:15:00

To maintain your possessions in safety?

besting timex   2017/11/14 上午 11:39:00

Have you ever considered about adding a little bit more
than just your articles? I mean, what you say is fundamental and
all. But just imagine if you added some great graphics
or videos to give your posts more, "pop"! Your content is excellent but with pics
and videos, this website could undeniably be one of the greatest
in its field. Wonderful blog!

Luiz Gastão Bittencourt   2017/11/13 下午 12:45:00

I read this piece of writing fully about the difference of latest and preceding
technologies, it's amazing article.

Lionel   2017/11/12 下午 04:57:00

This website was... how do I say it? Relevant!! Finally
I've found something which helped me. Thank you!

make certain asbestos   2017/11/11 上午 07:12:00

Outstanding quest there. What occurred after?

Lelio Vieira Carneiro Junior   2017/11/10 上午 11:34:00

I think what you wrote was actually very logical.
However, what about this? suppose you wrote a catchier title?
I mean, I don't wish to tell you how to run your blog,
however suppose you added a post title that grabbed a person's attention? I mean 【卜維丰】Javascript 繪圖 is kinda vanilla.
You ought to peek at Yahoo's home page and see how they create article titles to get people to open the links.
You might add a video or a related pic or two to get people interested about everything've
written. In my opinion, it could make your website
a little bit more interesting.

網頁設計   2017/10/7 下午 05:57:00


What makes you grow taller during puberty?   2017/8/21 下午 01:38:00

Hi there! Do you know if they make any plugins to help with Search Engine Optimization?
I'm trying to get my blog to rank for some targeted
keywords but I'm not seeing very good gains.
If you know of any please share. Thanks!

What do you do for a strained Achilles tendon?   2017/8/4 下午 02:13:00

What's up, just wanted to mention, I liked this
post. It was helpful. Keep on posting!

http://leciafischetti.soup.io/post/594423179/none   2017/7/31 上午 01:05:00

You actually make it seem so easy with your
presentation but I find this topic to be actually something that I think
I would never understand. It seems too complex and very broad for me.
I'm looking forward for your next post, I'll try to get the hang of

Can you increase your height by stretching?   2017/7/28 下午 10:17:00

Hello there, You have done a great job. I'll definitely digg it and personally recommend to my friends.
I am confident they'll be benefited from this website.

What causes painful Achilles tendon?   2017/7/28 上午 11:30:00

you're actually a excellent webmaster. The website loading velocity is incredible.
It seems that you're doing any unique trick. Also, The
contents are masterpiece. you have performed a
wonderful process in this topic!

   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?

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

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



  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝