主題

利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。

成果

完整程式碼
Demo效果

實作重點

Javascript

1. canvas (MDN)：

   1. canvas.getContext("2d") : 處理 2d 繪圖的上下文

      const ctx = canvas.getContext("2d");
      

   2. strokeStyle：設定或畫筆線條顏色

   3. lineWidth：設定或畫筆線條粗寬度

   4. lineCap：設定或畫筆線條末端樣式

   5. lineJoin：設定或畫筆兩線相交時的樣式

2. 滑鼠指令操作：

   1. 滑鼠點擊設定

      1. mousedown ：取得滑鼠位置為繪製的起始點

         canvas.addEventListener('mousedown', (e) => {})
         

      2. mousemove ：紀錄繪製的路徑

         canvas.addEventListener('mousemove', (e) => {})
         

      3. mouseup ：停止繪製

         canvas.addEventListener('mouseup', () => {})
         

      4. mouseleave ：當滑鼠移出畫布範圍時停止繪圖 (也可以用mouseout)

         canvas.addEventListener('mouseleave', () => {}) 
         

   2. 開始繪製

      1. 設定是否繪製中的變數，初始值為 false ，當 mousedown 時變成 true ，並記住畫筆位置： x.offsetX 、x.offsetY

         let isDrawing = false; 
         let lastX = 0;
         let lastY = 0;
         
         canvas.addEventListener('mousedown', (e) => {
           isDrawing = true;
           [lastX, lastY] = [e.offsetX, e.offsetY];
         })
         

      2. 在 mousemove 裡面做繪圖邏輯

      3. 開始畫圖：ctx.beginPath();

         ctx.beginPath();
         

      4. 畫筆移到點下去的位置： moveTo

         ctx.moveTo(lastX, lastY);
         

      5. 畫筆移動到哪裡： lineTo ，再賦予值給畫筆位置

         ctx.lineTo(e.offsetX, e.offsetY);
         [lastX, lastY] = [e.offsetX, e.offsetY];
         

      6. 執行畫筆動作： stroke()

         ctx.stroke()
         

   3. 畫筆顏色

      1. 使用變數去動態改變 hsl 顏色值

         let colorDeg = 0; //初始
         ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`; //初始
         
         colorDeg = colorDeg < 360 ? colorDeg + 1 : 0;
         ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;
         

   4. 動態調整畫筆粗細，由粗到細，由細到粗

      1. 使用變數去改變，在用方向去加減

         let lineWidthNum = 50; //初始
         let direction = -1; //初始
         
         if (lineWidthNum < 1 || lineWidthNum > 50) {
         	// 如果小於 1 或大於 50 就 *-1
           direction *= -1;
         }
         lineWidthNum += direction; // 這裡就會是加或減
         ctx.lineWidth = lineWidthNum; // 賦予上去
         

額外知識

canvas 有很多功能，可以製作動畫、圖表等。有很多以 Canvas 基礎的套件，例如 chartjs、D3、paper，matter、three、fabric，等你去發掘吧~~