iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

JavaScript 30天系列 第 8

JS30 - day08: Fun with HTML5 Canvas

https://ithelp.ithome.com.tw/upload/images/20181016/20111164aclrnlHNit.png

來用HTML5的Canvas畫畫了^^

使用者操作需求

在畫布上用滑鼠繪製色彩粗細會自動變化的線條~

重點記錄

主要是canvas的繪圖步驟

  1. 定義線條樣式
    (1) strokeStyle線條顏色
    (2) lineWidth線條寬度
    (3) lineJoin線條的轉角樣式
    (4) lineCap線條的頭與尾巴樣式

  2. 移動順序
    (1) beginPath()開啟一個新的繪製路徑
    (如果要繪製多個圖形指令都介於beginPath()-closePath())
    (2) moveTo()將繪製路徑的起點移動到指定的座標中
    (3) lineTo()連接路徑終點到指定的座標中
    (4) stroke()繪製路徑

流程步驟

1. 在HTML加入<canvas>標籤,可先預設寬高

<!-- 一開始的預設畫布 -->
<canvas id="draw" width="800" height="800"></canvas>

2. 將畫布撐滿,並且設置變數ctx為canvas的操作元素

getContext() 指定要在畫布上繪製的類型,繪製2D輸入‘2d’,3D輸入'3d'

const canvas = document.querySelector('#draw');

// 將畫布寬高撐滿至視窗大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 設定繪圖環境為2d
const ctx = canvas.getContext('2d');

3. 設定待一開始預設的變數

// *繪圖環境 樣式設定*
ctx.strokeStyle = '#BADA55'; // 預設線條顏色
ctx.lineJoin = 'round';      // 線條轉角樣式 https://goo.gl/XntWW9
ctx.lineCap = 'round';       // 線條頭與尾巴樣式 https://goo.gl/82GrwJ

let isDrawing = false; // 用於判斷是否執行畫圖
let lastX = 0;         // 起始點X
let lastY = 0;         // 起始點Y
let hue = 0;           // 預設初始顏色
let direction = false; // 判斷粗細增減用

4. 增加滑鼠監聽

控制滑鼠是否可以執行畫畫

// 當滑鼠按下時,isDrawing轉為true,並將初始點設為滑鼠點下的位置
canvas.addEventListener('mousedown', (e)=> {
    isDrawing = true;
    [ lastX, lastY ] = [ e.offsetX, e.offsetY ]
  });
  
// 當滑鼠移動時,執行function draw
canvas.addEventListener('mousemove', draw);

// 當滑鼠放開或離開畫面時,isDrawing轉為false,不執行function draw
canvas.addEventListener('mouseup', ()=> isDrawing = false);
canvas.addEventListener('mouseout', ()=> isDrawing = false);

5. 繪製function draw()

function draw (e) {

  // 檢查isDrawing是否為true,不是的話停止執行function
  if(!isDrawing) return;
  
  // 設定線條顏色為hsl吃變數hue,可以去移動數值看看色彩的變化 https://goo.gl/QxMkn
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();                  // 起始畫圖路徑
  ctx.moveTo(lastX, lastY);         // 路徑起始點
  ctx.lineTo(e.offsetX, e.offsetY); // 將起始點與目前滑鼠位置的X、Y用線條連接起來
  ctx.stroke();                     // 將線條繪製出來
  [ lastX, lastY ] = [ e.offsetX, e.offsetY ]  // 打結束點放入lastX,lastY
  
  // 顏色變幻效果
  // 0為紅色轉一圈到360紅色後就把變數hue變回0繼續繞圈
  hue ++;
  if(hue >= 360){
    hue = 0;
  }

  // 線條粗細變換效果
  // 利用轉換direction的false,true來做線條的++跟--
  if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }
  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }
}

上一篇
JS30 - day07: Array Cardio Day 2
下一篇
JS30 - day09: 14 Must Know Dev Tools Tricks
系列文
JavaScript 30天11

尚未有邦友留言

立即登入留言