You are on page 1of 15

25 塗鴉板

25.1
25.1

功能導覽

矩形 / 圓形 線條 筆刷 橡皮擦 線條寬度樣式 畫筆顏色 透明度 儲存 / 重繪 / 清空 編輯圖片

網頁配置⿠ 儲存 / 重繪 / 清空 ⿠ 編輯圖片 25.3 功能實作 ⿠ mdown 與按下滑鼠左鍵 ⿠ mup

25.3
25.3

功能實作

mdown 與按下滑鼠左鍵

mup 與放開滑鼠左鍵

mmove 與滑鼠拖曳 清空 重繪 儲存

⿠ mmove 與滑鼠拖曳 ⿠ 清空 ⿠ 重繪 ⿠ 儲存 25-2 SUMMARY HTML5 完美風暴(第二版)

25-2

SUMMARY

HTML5 完美風暴(第二版)

HTML5 完美風暴

11.1 進入 HTML5 之前必須瞭解的事實

PART 1

第二十五章

塗鴉板

HTML5 完美風暴(第二版)

11.1  進入 HTML5 之前必須瞭解的事實 PART 1 第二十五章 塗鴉板 HTML5 完美風暴(第二版) 25-3

25-3

25 塗鴉板

本章針對 Canvas 繪圖進行實際的應用,透過一個簡易的塗鴉板實作,示範各種 Canvas 的繪圖功能。

25.1 功能導覽

此案例是單一網頁的應用程式,提供圖形描繪功能,網頁載入畫面:

矩形與圓形 任意直線與曲線 特殊筆刷 橡皮擦 圖形線條粗細調整 繪圖區域
矩形與圓形
任意直線與曲線
特殊筆刷
橡皮擦
圖形線條粗細調整
繪圖區域
圖形線條顏色
目前使用畫筆顏色
圖形透明度

網頁內容包含兩個區塊,左邊是繪圖區域,右邊是功能表,功能表的上半部提供

各種圖形描繪的畫筆,支援任意路徑直線、矩形或是圓形等幾何圖形描繪,還有

特定顏色的筆刷,以及可修改內容的橡皮擦,功能表的下半部則是圖形樣式的切

換,包含線條的粗細、顏色以及透明度設定。

換,包含線條的粗細、顏色以及透明度設定。 25-2 HTML5 完美風暴(第二版)

25-2

HTML5 完美風暴(第二版)

25.1 功能導覽

使用者可以在網頁上的繪圖區域描繪圖形,點選功能表上半部的任何一種畫筆即

可進行圖形的描繪,再點選下半部的樣式,決定所要套用的畫筆樣式即可於繪圖

板描繪任意圖形。

當網頁第一次載入,預設的情形下,直接於繪圖區域中按下滑鼠左鍵拖曳,會出

現下以下的效果:

現下以下的效果:

如果你要描繪其它的圖形或是改變樣式設定,可以透過功能表中的工具進行調

整,以下逐一作說明。

整,以下逐一作說明。 HTML5 完美風暴(第二版) 2 5 - 3

HTML5 完美風暴(第二版) 25-3

25 塗鴉板

矩形 / 圓形

如果要描繪矩形或是圓形,可以選取第一組工具,如下圖:

於繪圖區域中想要描繪的位置,按下滑鼠左鍵將圖形拖曳至想要的大小尺寸即

可,使用者可以選擇描繪框線或是實心圖形。

可,使用者可以選擇描繪框線或是實心圖形。 25-4 HTML5 完美風暴(第二版)

25-4

HTML5 完美風暴(第二版)

線條

25.1 功能導覽

選取第二組畫筆可以描繪線條,包含直線與任意線條:

純粹的直線,必須選取斜直線圖示的畫筆,同樣的,按下滑鼠左鍵即可拖曳出任

意直線,如果要摸擬手寫畫筆,則選擇曲線圖示,繪圖區域會在使用者按下滑鼠

左鍵拖曳時,忠實的呈現拖曳的路徑線條,這也是預設的畫筆樣式。

HTML5 完美風暴(第二版) 2 5 - 5

HTML5 完美風暴(第二版) 25-5

25 塗鴉板

筆刷

這是六種不同顏色的筆刷描繪畫面,使用者可以根據自己的需求,選擇任何一種

顏色的筆刷進行描繪。

顏色的筆刷進行描繪。 25-6 HTML5 完美風暴(第二版)
顏色的筆刷進行描繪。 25-6 HTML5 完美風暴(第二版)

25-6

HTML5 完美風暴(第二版)

橡皮擦

25.1 功能導覽

如果有需要修改的地方,可以選取橡皮擦進行圖形塗改作業:

首先於畫面上拖曳出一個實心的矩形,接下來選取橡皮擦工具即可進行擦拭,如

圖顯示擦拭的效果。

使用橡皮擦工具時,會發現擦拭的面積很小,這對於大範圍的塗改相當不便,此

時可以在接下來的樣式區域中,點選合適的寬度,以最粗的樣式為例,用滑鼠在

上面點一下再重新擦拭矩形區域,如下頁圖:

HTML5 完美風暴(第二版)

上面點一下再重新擦拭矩形區域,如下頁圖: HTML5 完美風暴(第二版) 2 5 - 7

25-7

25 塗鴉板

2 5 塗鴉板 讀者可以發現,這一次擦拭的面積大上許多。 ⿠ 線條寬度樣式

讀者可以發現,這一次擦拭的面積大上許多。

線條寬度樣式

選取寬度樣式同時會改變描繪的圖形線條寬度,現在分別選取矩形、直線等畫

筆,並且選取最粗的線條寬度進行描繪,如下圖:

筆,並且選取最粗的線條寬度進行描繪,如下圖: 25-8 HTML5 完美風暴(第二版)
筆,並且選取最粗的線條寬度進行描繪,如下圖: 25-8 HTML5 完美風暴(第二版)

25-8

HTML5 完美風暴(第二版)

25.1 功能導覽

左邊這一組圖形以預設寬度的畫筆描繪,右邊這一組則選取了最粗的線條寬度樣

式,讀者可以明顯的看出這兩組圖形的差異。

畫筆顏色

功能表下方提供一組色板,點選任意顏色即可描繪出對應顏色的線條圖形:

在這個截圖中,分別套用了不同的顏色書寫

在這個截圖中,分別套用了不同的顏色書寫 HTML5 這個字串,而當你點選任何 一個顏色樣式時,下方的色塊會呈現此顏色,表示目前套用的顏色,讀者應該也 注意到了,網頁一開始載入的預設值是黑色。

透明度

功能表最下方還有一組以不同色階表示的透明度樣式功能,選取不同的透明度,

可以描繪出特定透明度的圖形:

HTML5 完美風暴(第二版)

可以描繪出特定透明度的圖形: HTML5 完美風暴(第二版) 2 5 - 9

25-9

25 塗鴉板

2 5 塗鴉板

這個畫面包含兩組圖形,上方的矩形方塊沒有設定透明度,分別以紅色與藍色描

繪兩個重疊的方塊,而上方的矩形方塊,在描繪第二個矩形時設定了透明度,因

此重疊的部分可以看到被蓋住的實心紅色矩形。

儲存 / 重繪 / 清空

畫面下方的三個按鈕,提供圖形描繪過程中的狀態儲存與調整。

清空:清除整個畫面的內容以方便使用者重新描繪。

重繪:清除最近一次的描繪步驟。

儲存:將目前的畫面,轉存為圖片檔案。

當使用者完成描繪之後,只要按一下「儲存」即可將描繪的畫面轉存成為圖片:

25-10 HTML5 完美風暴(第二版)

25-10

HTML5 完美風暴(第二版)

 
 

25.1 功能導覽

  25.1  功能導覽

左圖是描繪的畫面,右圖是按下「儲存」按鈕之後,將畫面轉存成為圖片檔,使

用者可以自行選擇儲存。

編輯圖片

使用者也可以直接將一個外部圖片檔拖曳至繪圖板進行加工處理:

上述截圖中,從檔案總管拖曳一張圖片檔案至繪圖區域中,即可進行任何編輯,

當然,你也可以隨時按下「儲存」按鈕將編修好的圖片另轉存為新的圖片。

HTML5 完美風暴(第二版)

HTML5 完美風暴(第二版) 2 5 - 1 1

25-11

25 塗鴉板

25.2 網頁配置

此案例的重點在 JavaScript 功能程式碼的實作,由於只有單一畫面,網頁的設計 比較簡單,配置如下:

比較簡單,配置如下: 上方 <header> 僅配置標題,右邊的

上方 <header> 僅配置標題,右邊的 <aside> 則是各種畫筆與樣式設定功能區域, 中間則是包含 <canvas> 的描繪區域以及三個功能按鈕,內容如下:

<section id="paint-area"> <div class="container"> <canvas id="pCanvas" height="620" width="800px" onmousedown="mdown(event)"> </canvas> </div> <div class="container"> <button onclick="clearCanvas()"> 清空</button> <button onclick="play()"> 重繪</button> <button onclick="save()"> 儲存</button>

</div>

</section>

畫面右邊的功能區域,透過 <aside> 進行設計,其中以 <ul> 標籤分組配置所需的 畫筆圖片,內容如下:

<aside> <div id="controlPanel">

<aside> <div id="controlPanel"> 25-12 HTML5 完美風暴(第二版) ( 續 )

25-12

HTML5 完美風暴(第二版)

()

25.2 網頁配置

<div id="tool"> <ul> <li> <img id="rect" src="images/rect.png"
<div id="tool">
<ul>
<li>
<img id="rect" src="images/rect.png"
onclick="toolClickHandler(this)" />
</li>
</ul>
<ul>
<li>
<img id="line" src="images/line.png"
onclick="toolClickHandler(this)" />
</li>
</ul>
<ul>
<li>
<img id="ppen-black" src="images/ppen-black.png"
onclick="toolClickHandler(this)" />
</li>
</ul>
<ul>
<li>
<img id="eraser" src="images/eraser.png"
onclick="toolClickHandler(this)" alt="橡皮擦" />
</li>
</ul>
</div>

為節省篇幅,因此每一組工具僅列舉一個 <li> 標籤,同時設定其中 <img> onclick 事件屬性,在使用者按下此工具時,根據點選的選項,改變描繪圖形方式。

接下來的線條寬度樣式,則直接以 <li> 配置,並且透過 CSS 樣進行設定:

<div>

<ul id="lineWidth"> <li lw="28" onclick="lineClickHandler(this)" style="border-left: 22px solid;"></li> <li lw="16" onclick="lineClickHandler(this)" style="border-left: 18px solid;"></li>

</ul>

</div>

</div>

</aside>

其中的 lw 屬性表示要套用的畫筆線條寬度,onclick 事件屬性則是於使用者點選 任何一種線條寬度時將 lw 屬性值設定為所要套用的線條寬度。

HTML5 完美風暴(第二版)

lw 屬性值設定為所要套用的線條寬度。 HTML5 完美風暴(第二版) 2 5 - 1 3

25-13

25 塗鴉板

色板由大量的色塊組成,因此配置一個 <table> 以呈現所需的效果,內容如下:

<table>

<tbody>

<tr>

<td style="background: #330033;"> </td> <td style="background: #CC0033;"> </td> <td style="background: #3300CC;"> </td> <td style="background: #CC00CC;"> </td> </tr>

</tbody>

</table>

表格中的每一個 <td> 標籤空格代表一種顏色,以所要呈現的顏色代碼為其背景顏 色值,為了節省篇幅僅列舉其中第一個 <tr> 標籤的內容,其餘的請自行開啟原始 檔檢視。

最後是透明度,透過 <ul> 標籤進行配置:

<ul id="lineOpacity"> <li tp="1.0" onclick="tpClickHandler(this)" style="opacity: 1.0;"></li> <li tp="0.8" onclick="tpClickHandler(this)" style="opacity: 0.8;"></li> <li tp="0.6" onclick="tpClickHandler(this)" style="opacity: 0.6;"></li> <li tp="0.4" onclick="tpClickHandler(this)" style="opacity: 0.4;"></li> <li tp="0.2" onclick="tpClickHandler(this)" style="opacity: 0.2;"></li> <li tp="0.1" onclick="tpClickHandler(this)" style="opacity: 0.1;"></li>

</ul>

每一個 <li> 標籤設定其 tp 屬性為所要指定的對應透明度屬性值,並且分別設定其 style 樣式值,以指定的透明度呈現 <li> 的內容。

25.3 功能實作

相關的功能,由兩個 JavaScript 檔案進行實作。

JavaScript 檔案

說  明

paint.js

實作網頁描繪的相關功能。

drag.js

實作網頁圖片拖曳的相關功能。

drag.js 實作網頁圖片拖曳的相關功能。 25-14 HTML5 完美風暴(第二版)

25-14

HTML5 完美風暴(第二版)