臺灣博碩士論文加值系統

近年來行動平台蓬勃發展，以及網路應用程式(簡稱Webapp)的風行，Web上的開發技術顯然成為重要的一環，而HTML 5 正是目前備受矚目的一個Web開發技術。現今網路資訊普及狀態，使用者早已不能為單調的網頁及應用程式操作介面所滿足，必要的圖形呈現及視覺效果已成為不可或缺的要素。 HTML 5 提供了許多的新功能，包含了簡單快速的圖形 API，在不倚靠外掛程式的情況下提供華麗的視覺效果呈現。其中Canvas以簡單快速為特點而備受矚目。
關於Canvas的開發是透過Javascript新的語法在 HTML 的canvas標籤內繪製出各種圖形，然而Canvas雖然對於圖像處理有著不錯的效果，但有一個極大的缺點就是他繪製出的圖形並不支援事件的操作，所有圖形一旦繪製完成就不再被瀏覽器所關注，所有的事件僅能對整個canvas標籤做操作而無法對內部圖形各別操作，因此設計這一套將Canvas所繪製出的圖形物件化的使用插件，來使開發者能更方便、更快速對繪製出的圖形加以修改及操作。

In recent years, because the flourish in mobile platforms and the popularity of network application (referred as Webapp), it is clear that the development of Web technique becomes an important issue. In particular, Web technique using HTML 5 has received much attention.
Due to the fact that network and information are very popular nowadays, most of users cannot satisfy some situations, such as monotone webpages and unconventional user interface. Thus, the graphic renderings and visual effects have become essential elements for designing applications. For instance, HTML 5 offers many new features, including a simple and fast graphics API, providing gorgeous visuals presentation in the case that does not rely on any plug-in. A new feature called Canvas in HTLM 5 is characterized by rapid and simple high-profile.
Canvas can draw a variety of graphics within the HTML tags canvas through javascript new syntax. Although it has a well effect on image processing, its drawing results cannot support the operation of event, and thus is an obvious drawback. Once a drawing is complete, all graphics cannot continue to be operated by a browser. Moreover, all events can be done only in the entire canvas tag operation, and cannot be individually operated on any inner graphic. Therefore, we design a drawing package for Canvas that use plug-in to draw graphics. Consequently, it enables that developers can draw a graphic more easily and made modifications more quickly.

摘要 i
ABSTRACT ii
致謝 iii
圖目錄 vi
壹、HTML 5 1
一、簡介 1
二、發展歷史 1
三、HTML5 的重點新功能 1
貳、Javascript 3
一、簡介 3
二、發展歷史 3
三、Javascript 的物件導向設計概述 4
参、Canvas 5
一、發展 5
二、使用說明簡介 5
三、Canvas 與 SVG 、 WebGL 及 Falsh 比較 8
(一) SVG 8
(二) WebGL 8
(三) Falsh 9
肆、相關插件開發實例 10
一、Zebra 10
二、Canvas Query 11
伍、插件製作概念與方法 12
一、主體架構 12
二、事件實做 14
三、圖像處理效果實做 18
四、非內建常用圖形實做 20
(一)橢圓形 20
(二)正圓角矩形 22
(三)扇形 23
陸、結論 24
參考 25

[1] W3C Workshop on Web Applications and Compound Documents Jun, 2, 2004, from http://www.w3.org/2004/04/webapps-cdf-ws/minutes-20040602.html
[2] 陳會安(2012) ，Javascript 與 JQuery 網頁設計範例教本，1-13頁，碁峯資訊股份有限公司，台北。
[3] Cokie ，維基百科Retrieved Dec,01,2013 from http://zh.wikipedia.org/wiki/Cookie。
[4] 阮一峰(2011)， Javascript 繼承機制的設計思想http://www.cnblogs.com/amws/p/3343009.html 。
[5] OS X ，維基百科 Retrieved Dec,03,2013 from http://zh.wikipedia.org/wiki/Mac_OS_X 。
[6] WebKit，維基百科 Retrieved Dec,03,2013 from http://zh.wikipedia.org/wiki/WebKit 。
[7]Canvas，維基百科，Retrieved Dec,09,2013 from http://zh.wikipedia.org/wiki/Canvas_(HTML%E5%85%83%E7%B4%A0)
[8]文件物件模型，維基百科，Retrieved Dec,03,2013 from http://zh.wikipedia.org/wiki/%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B
[9] 什麼是液態佈局，桂林新界網路科技公司，Retrieved Dec,04,2013 from http://www.netskyline.cn/help_liquid.htm
[10] OpenGL，維基百科，Retrieved Dec,04,2013 from http://zh.wikipedia.org/wiki/OpenGL
[11] Elaine.Ye(2013)，WebGL的一些概念，Retrieved Dec,04,2013 from http://article.yeeyan.org/view/213582/388820
[12]Zebra 官方網站 Retrieved Nov,15,2013,from http://www.zebkit.com/
[13]stackoverflow question: the relation of the Bezier Curve and ellipse ? Jan, 5,2013, from http://stackoverflow.com/questions/14169234/the-relation-of-the-bezier-curve-and-ellipse