鐵人檔案
前述 一直很佩服參加鐵人賽的前人們，自己也在過去的鐵人賽中看到很多優秀的文章，在朋友的鼓吹之下，也參與了今年的鐵人賽。說實話，沒有實際寫過什麼分享文，單純是這兩...
前述 預計會花十五篇到二十篇使用 React 做出復刻 XP 的小畫家！讓大家在過程中也可以學習到相關的 canvas 技巧，不會 React 的人也不必擔心，...
說明 根據 MDN 的教學 一開始canvas為空白，程式碼腳本需要先存取渲染環境，在上面繪圖，然後才會顯現影像。 素有一個方法(method)叫getCon...
填滿色彩 在點擊畫布時，使用 fillStyle 先填上顏色，再覆蓋整個畫布 /** * 滑鼠點下畫布後開始畫畫 or 填滿 */ const handleMo...
選取器 選取器使用到 getImageData ctx.getImageData(sx, sy, sw, sh); 利用 getImageData 可以得到指...
直線 在上一篇章我們學會提取點擊時的位置，本篇章也會用到相同的 function，我們先將他移出。 const getClientOffset = (eve...
繪製矩形 核心 先來學習繪製矩形的方法 strokeRect 使用當前的繪畫樣式，描繪一個起點在 (x, y) 、寬度為 w 、高度為 h 的矩形的方法。...
圓形 嘗試ellipse 按照搜尋結果，我們一開始可能很直覺的會想到使用 ellipse ellipse 是 Canvas 2D API 添加橢圓路徑的方法。...
曲線 曲線有以下幾種方法 quadraticCurveTo quadraticCurveTo 是 Canvas 2D API 新增二次貝塞爾曲線路徑的。它需要...
動手寫看看 目前只能做到放大... const [magnifier, setMagnifier] = useState(false); //是否放大中...
