iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Canvas 小錦囊 系列

利用 canvas 做出一些可以互動的小東西

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊拒絕奴性的網友
DAY 1

Day 1 - 參賽前言

前述 一直很佩服參加鐵人賽的前人們,自己也在過去的鐵人賽中看到很多優秀的文章,在朋友的鼓吹之下,也參與了今年的鐵人賽。說實話,沒有實際寫過什麼分享文,單純是這兩...

2021-09-16 ‧ 由 雪莉 分享
DAY 2

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

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

2021-09-17 ‧ 由 雪莉 分享
DAY 3

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

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

2021-09-18 ‧ 由 雪莉 分享
DAY 4

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

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

2021-09-19 ‧ 由 雪莉 分享
DAY 5

Day 5 - 用 canvas 復刻 小畫家 挑選顏色(顏色選取器)

選取器 選取器使用到 getImageData ctx.getImageData(sx, sy, sw, sh); 利用 getImageData 可以得到指...

2021-09-20 ‧ 由 雪莉 分享
DAY 6

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

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

2021-09-21 ‧ 由 雪莉 分享
DAY 7

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

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

2021-09-22 ‧ 由 雪莉 分享
DAY 8

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

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

2021-09-23 ‧ 由 雪莉 分享
DAY 9

Day 9 - 用 canvas 復刻 小畫家 曲線

曲線 曲線有以下幾種方法 quadraticCurveTo quadraticCurveTo 是 Canvas 2D API 新增二次貝塞爾曲線路徑的。它需要...

2021-09-24 ‧ 由 雪莉 分享
DAY 10

Day 10 - 用 canvas 復刻 小畫家 放大鏡

動手寫看看 目前只能做到放大... const [magnifier, setMagnifier] = useState(false); //是否放大中...

2021-09-25 ‧ 由 雪莉 分享