「JavaScript 30」學習筆記（八）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

練習操作 Canvas 畫布。

筆記

先取得 #draw 元素。

1
2
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
  • getContext() 方法返回一個用於在畫布上繪圖的環境。當前唯一合法値是 2d，代表二維繪圖。

將畫布環境設定成目前瀏覽器的寬度與長度。

1
2
canvas.width = window.innerWidth;
canvas.weight = window.innerHeight;

設定預設樣式。

1
2
3
4
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;
  • strokeStyle 屬性代表筆觸顏色。
  • lineJoin 屬性代表線條連接樣式。
  • lineCap 屬性代表線條結束樣式。

設定預設參數。

1
2
3
4
5
let isDrawing = false; // 是否執行畫圖
let lastX = 0; // 最初 X 軸
let lastY = 0; // 最初 Y 軸
let hue = 0; // 最初色相
let direction = true; // 是否反轉

設定一個 draw() 函式，以操作 Canvas 畫布。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function draw(e) {
    if (!isDrawing) return; // 如果沒有執行畫圖就停止
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; // 最初色相
    ctx.beginPath(); // 初始化一條路徑。
    ctx.moveTo(lastX, lastY);// 將起始點與目前的滑鼠位置連接起來
    ctx.lineTo(e.offsetX, e.offsetY);// 將線條繪製出來
    ctx.stroke(); // 繪製出定義好的路徑
    [lastX, lastY] = [e.offsetX, e.offsetY]; // 把結束點放回 X 和 Y 變數中
    hue++; // 增加色相

    // 如果色相超過 360 就歸零
    if (hue >= 360) {
        hue = 0;
    }

    // 如果筆觸粗細大於等於 100 或 小於等於 1 就反轉
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
        direction = !direction;
    }

    // 增加或減少筆觸粗細
    if (direction) {
        ctx.lineWidth++;
    } else {
        ctx.lineWidth--;
    }
}

綁定 mousedown 和 mousemove 事件以開始畫圖。

1
2
3
4
5
6
canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);

綁定 mouseup 和 mouseout 事件以結束畫圖。

1
2
3
canvas.addEventListener('mouseup', () => isDrawing = false);

canvas.addEventListener('mouseout', () => isDrawing = false);