可选择画笔粗细、颜色的「网页版绘图介面」.PDFVIP

可選擇畫筆粗細、顏色的 「網頁版繪圖介面」 本篇將利用 HTML5 的 canvas 來建立繪 圖程式, 實作「畫筆模式／橡皮擦模式選 擇」、「線條粗細的 3 階段（粗．中．細） 設定」、「從 10 個顏色中選擇線條顏色」 等功能, 藉此學習 canvas 的基本操作及 事件處置。 製作．撰文／小原 暢（面白法人 KAYAC） 使用技巧 canvas 元素 JavaScript 製作要點 活用 data 屬性的簡單實作 使用 jQuery 的 delegate() 之事件處置 針對圖示等圖像, 使用 SVG 的技巧 支援瀏覽器／智慧型手機 IE 9 以上 Firefox 26 以上 Safari 7 以上 Chrome 32 以上 使用的外掛程式 jQuery（2.0.3） /jquery-2.0.3.min.js 滑鼠事件的處置 Step 01 首先, 思考一下用滑鼠畫線的操作動作, 01 1- 滑鼠事件種類 為此必須處理： 事件 內容 mousedown ‧初始化路徑 mousedown ‧設定路徑起點 mousemove ‧加入 mousemove 事件處理器 mouseup ‧加入 mouseup 事件處理器 等 3 個事件。各個事件中進行的處理 如表 01 1- 所示。 mousemove ‧加入路徑 沿著路徑描繪 一 開 始 加 入 的 事 件 處 理 器 只 有 mouseup ‧刪除 mousemove 事件處理器 mousedown, mousemove、mouseup 的 ‧刪除 mouseup 事件處理器 事件處理器則是視需要加入／刪除。 Step 02 mousedown 事件處理器中所進行的處理如下。 初始化路徑 設定路徑起點 加入 mousemove 事件處理器 加入 mouseup 事件處理器 程式碼如