Fun with HTML5 Canvas


Posted by wayne201299 on 2023-09-26

建立一塊白板可以在上面畫畫

實作

  1. 繪製一塊 canvas 區域,並用2D的方式渲染整個頁面,並取得渲染的方法ctx,後續的繪圖都會是以這個物件來做
         const canvas = document.querySelector('#draw')
         const ctx = canvas.getContext('2d')
         canvas.width = window.innerWidth
         canvas.height = window.innerHeight
    
  2. 建立畫筆的粗細、顏色、出發點

         ctx.strokeStyle = '#BADA55'
         ctx.lineJoin = 'round'
         ctx.lineCap = 'round'
    
         let isDrawing = false;
         // 繪圖的起始點
         let lastX = 0;
         let lastY = 0;
         let hue = 0;
         let direction = true;
    
  3. 建立畫畫的方法

     function draw(e) {
       if (!isDrawing) return;
       ctx.beginPath();
       ctx.moveTo(lastX, lastY);
       ctx.lineTo(e.offsetX, e.offsetY);
       ctx.stroke();
       [lastX, lastY] = [e.offsetX, e.offsetY]
     }
    
  4. 監聽canvas上的滑鼠事件以得到畫筆動作

         canvas.addEventListener('mousemove', draw)
         canvas.addEventListener('mousedown', (e) => {
           isDrawing = true;
           [lastX, lastY] = [e.offsetX, e.offsetY];
         })
         canvas.addEventListener('mouseup', () => isDrawing = false);
         canvas.addEventListener('mouseout', () => isDrawing = false);
    

    注意需要在滑鼠鬆開時重新進算起始點

  5. 動態設定筆刷顏色,可以透過hsl屬性,改變第一個參數也就是hue做到顏色變更的效果

     ctx.strokeStyle = `hsl(${hue},100%,50%)`;
    
  6. 動態設定筆刷大小,建立一個flag用來記錄筆刷要放大還是縮小,讓整體縮放更滑順

     let direction = true;
    
     function draw(e) {
         ...
       if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
         direction = !direction
       }
       if (direction) {
         ctx.lineWidth++
       } else {
         ctx.lineWidth--
       }
     }
    
  7. 最後透過globalCompositeOperation設定筆畫間的混合效果
     ctx.glovalCompositeOperation = 'multiply'
    

canvas

HTML 中的 標籤是一個用於繪製圖形的HTML5元素。它提供了一個繪製2D圖形和繪製一些基本3D圖形的區域。開發人員可以使用JavaScript在 元素上繪製圖形、圖表、動畫和互動性。

以下是 標籤可以做的一些事情:

  • 繪製圖形和形狀: 開發人員可以使用 繪製各種形狀,如線條、矩形、圓形、多邊形等。
  • 圖表和圖形: 開發人員可以使用 繪製各種圖表,例如折線圖、長條圖、圓餅圖等,以可視化數據。
  • 圖像處理: 元素允許開發人員對圖像進行處理,例如裁剪、縮放、旋轉和濾鏡應用。
  • 動畫: 使用JavaScript,開發人員可以在 上創建動畫。他們可以繪製多個幀以創建平滑的動畫效果。
  • 互動性: 開發人員可以監聽 上的事件,例如鼠標點擊、移動和觸摸事件,以實現互動性。
  • 遊戲開發: 是HTML5遊戲開發的重要組件。它提供了繪製遊戲場景、角色和遊戲物品的能力。
  • 繪製文本: 開發人員可以使用 繪製文本,並自定義字體、大小和顏色。
  • 實時圖形: 允許您不斷更新並繪製實時圖形,例如股票市場的價格圖表或即時數據視覺化。

總之, 標籤是一個強大的HTML元素,可用於在網頁上創建各種視覺效果和圖形。它提供了對圖形渲染的直接控制,並允許開發人員根據需要自定義繪圖。

知識點

  • 理解HTML中canvas的運用
  • Mothereffing HSL,幫助理解CSS (Cascading Style Sheets) 中的HSL顏色模型
    • 色調(Hue):指的是顏色的基本色調,以角度表示,從0度(紅色)到360度(再次是紅色,也是完全飽和的)。
    • 飽和度(Saturation):表示色彩的鮮艷度,以百分比表示,0% 表示灰色,100% 表示完全飽和的顏色。
    • 亮度(Lightness):表示顏色的亮度,以百分比表示,0% 表示黑色,100% 表示白色。
  • Hue的數值從0-360會輪完所有的顏色
  • globalCompositeOperation是 HTML5 Canvas 中的一個屬性,用於控制繪圖上下文中不同圖形之間的混合效果。它的作用是指定在將新的形狀繪製到現有內容上時,如何將新的像素數據結合(混合)到現有的內容中

#javascript #html







Related Posts

[week9] 給自己看的 PHP 和 MySQL 溝通

[week9] 給自己看的 PHP 和 MySQL 溝通

Python Table Manners - pre-commit: git commit 前做完檢查

Python Table Manners - pre-commit: git commit 前做完檢查

遍歷節點、操作節點

遍歷節點、操作節點


Comments