# JS30 D8 Fun with HTML5 Canvas by six 簡介：用 canvas 畫畫～ --- # 流程 - 掛事件監聽 - 設定筆觸 - 加點特效 --- # 事件監聽 - mousedown 滑鼠按下 - mousemove 滑鼠移動 - mouseup 滑鼠放開 - mouseout / mouseleave 滑鼠離開 多層 div 時建議用後者 --- # 設定畫布 取得畫布上下文: const ctx = canvas.getContext('2d'); --- # 基本筆觸設定 - strokeStyle 筆觸顏色 - lineWidth 筆觸寬度 (1.0) - lineCap 筆觸收尾 butt 矩形 / round (延伸)圓滑 / square (延伸)矩形 - lineJoin 筆觸轉折處 round 圓滑 / bevel 有修飾拐角 / miter 無修飾拐角 --- # 下筆 - ctx.beginPath(); 開始路徑 - ctx.moveTo(lastX, lastY); 移動畫筆 - ctx.lineTo(e.offsetX, e.offsetY); 畫線到指定位置 - ctx.stroke(); 畫！ - ctx.closePath(); 結束路徑 文件上有這個，但範例沒用到 --- # 加點特效 控制筆觸顏色變化 HSL 的色相角度 => 連續遞增 + 360 度循環 控制筆觸大小在一個峰值和低谷震盪 => 加一個變數控制方向 or 週期函式 sin() --- # 中場時間 想像力大挑戰，大家有什麼新奇的點子想完成呢？ --- # That's battle！ 挑戰者出現 Benben 表示：這是我的主場，看我的 P5.js，YO！ --- # 結語 - 原生 canvas 適合小專案或是練手 - 成熟專案多半還是依賴框架 - canvas vs SVG --- # 參考資料 - [[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 8：Fun with HTML5 Canvas - YouTube](https://www.youtube.com/watch?v=3862i0RdKLU) - [Canvas API - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API) - [Canvas 教學文件 - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial)