技術 第 14 幅 － 事件監聽實作：一個畫版與一個被程式耽誤的畫家？

昨天分享了許多監聽的方法，今天就利用這些技能來完成一個畫版。大家還記得昨天的文章最後有問到實作畫版可能會用到幾種監聽？你們覺得呢？其實這次的實作我總共用到了「五...

技術 Day13 - 用 canvas 復刻 小畫家 選擇剪下移動

說明 在選擇剪下時，我們可以建立一個新的 canvas來建立我們所剪下的內容 /** * 滑鼠點下畫布 */ const handleMou...

技術 Day 12 - 用 canvas 復刻 小畫家 文字填寫

說明 ctx.font = "30px sans-serif" //文字字型 大小 ctx.fillStyle="#00A0E9&...

技術 Day 8 - 用 canvas 復刻 小畫家 繪製圓形/橢圓形

圓形 嘗試ellipse 按照搜尋結果，我們一開始可能很直覺的會想到使用 ellipse ellipse 是 Canvas 2D API 添加橢圓路徑的方法。...

技術 Day 7 - 用 canvas 復刻 小畫家 繪製矩形與圓角矩形

繪製矩形 核心 先來學習繪製矩形的方法 strokeRect 使用當前的繪畫樣式，描繪一個起點在 (x, y) 、寬度為 w 、高度為 h 的矩形的方法。...

技術 Day 6 - 用 canvas 復刻 小畫家 直線

直線 在上一篇章我們學會提取點擊時的位置，本篇章也會用到相同的 function，我們先將他移出。 const getClientOffset = (eve...

技術 Day 4 - 用 canvas 復刻 小畫家 填入色彩, 橡皮擦

填滿色彩 在點擊畫布時，使用 fillStyle 先填上顏色，再覆蓋整個畫布 /** * 滑鼠點下畫布後開始畫畫 or 填滿 */ const handleMo...

技術 Day 3 - 用 canvas 復刻 小畫家 畫筆

說明 根據 MDN 的教學 一開始canvas為空白，程式碼腳本需要先存取渲染環境，在上面繪圖，然後才會顯現影像。 素有一個方法(method)叫getCon...

技術 Day 2 - 用 canvas 復刻 小畫家 材料準備

前述 預計會花十五篇到二十篇使用 React 做出復刻 XP 的小畫家！讓大家在過程中也可以學習到相關的 canvas 技巧，不會 React 的人也不必擔心，...

技術 善用小畫家及Office Picture Manager裁切並列印圖片～以自助旅行地圖路線規劃為例

編輯與列印圖片 旅遊時必須隨身攜帶地圖，但旅遊書過於笨重，靠智慧型手機內建的地圖有沒電的危險，還是拿著一份紙本地圖在手上比較安心。Windows內建的小畫家和O...

達標好文 技術 [無料才是王道] 圖片編輯 - Paint.NET

========================================= 軟體名稱：Paint.Net 軟體版本：3.36 官方網頁：http://w...