在寫這篇的時候，真的心力交瘁。

第一次在同一時間負責量個project、負責build PIC、releases PIC，
同一時間一次很多事情一起來又不想要讓自已停止前進，真的是疲憊不堪，
開始想著是不是自己沒有天份，所以做起來會覺得這麼辛苦，
但其實還是撐得住的啊～
事情都有在軌道上前進，想做的事情也有做到，真的證明人的淺能是無限的。

我想現在寫這些，過了五年之後回來看，應該會覺得這時候自己真的很有活力，

這次做的東西我覺得相當有趣，因為可以用js做一些判斷，另外還可使用canvas畫圖，
看看Dom都怎麼介紹，當然一開始還是會一直撞牆，遇到很多問題，
可是每當完成之後心裡都會有一種說不出來的喜悅，我想以後真的開始面試的時候，
一定不會被問倒，每次做一個東西都會先看原作，在自己試試看，試完再去看看其他人怎麼寫個主題。

像個大海容納百川，最後就會知識淵博了。

真的覺得看得越多懂的越多，可以省很多時間，一開始先想好未來可能會有問題，這樣以後就不用在花相同的時間去解決這個問題，也可以讓有用到的人順利不產生conflict，
難怪sr.engineer 會這麼值錢，因為它們都可以預先想好自己未來可能會產生的問題。

有在前進的感覺真好。

08 - Fun with HTML5 Canvas

主題

使用HTML5的Canvas來製作一個畫布，
透過滑鼠來繪製彩色粗細不一的線條～

步驟

Step1

先在HTML的地方建立一個<canvas>的區塊，
並設置一個變數ctx作為canvas的操作元素，
設定顏色strokeStyle、樣式lineJoin、lineCap、lineWidth…

Step2

接著設定變數各種待會會應用到的變數

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55'; // 線條顏色
ctx.lineJoin = 'round'; // 線條連接樣式（轉角）
ctx.lineCap = 'round'; // 線條結束樣式
ctx.lineWidth = 100; // 線條寬度
let isDrawing = false; // 判斷是否執行畫圖中
let lastX = 0; 
let lastY = 0;
let hue = 0; // 色相值，在hsl中使用
let direction = true; // 判斷粗細增減用

Step3

寫function來執行畫圖！

function draw(e) {
    // 判斷是否`isDrawing`，`false`則`return`不觸發此function
    if (!isDrawing) { return; } 
    // 設定線條顏色為hsl模式，吃變數hue
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; 
    // 起始畫圖路徑
    ctx.beginPath(); 
    // 將路徑指針移動到X、Y點
    ctx.moveTo(lastX, lastY); 
    // 將起始點與目前滑鼠位置的X、Y用線條連接起來
    ctx.lineTo(e.offsetX, e.offsetY); 
    // 將線條繪製出來
    ctx.stroke();
    // 把結束點放進X、Y變數中
    [lastX, lastY] = [e.offsetX, e.offsetY]; 
    
    // 做顏色的變化效果，當色相值超過360後歸零
    hue++; 
    if (hue >= 360) { 
        hue = 0; 
    }
    // 做線條寬度的變化效果，當寬度達到指令值得時候，切換direction的true/false
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { 
        direction = !direction; 
    }
    if (direction) {
        ctx.lineWidth++;
    } else {
        ctx.lineWidth--;
    }      
}

Step4

接著設定滑鼠對應的addEventListener效果

// 當滑鼠按下時，將目前滑鼠的位置設定為變數中的X、Y並讓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);

Javascript語法&備註

direction = !direction

學到的是透過這個方式來做true/false的切換。

HTML5語法&備註

這篇幾乎都是使用到canvas的功能，
紀錄若要製作像這樣的畫布效果在canvas中的使用順序：

1. 定義線條樣式

(1) strokeStyle線條顏色
(2) lineWidth線條寬度
(3) lineJoin線條的轉角樣式
(4) lineCap線條的結束樣式

2. 移動順序

(1) beginPath()開啟一個新的繪製路徑
(2) moveTo()將繪製路徑的起點移動到指定的座標中
(3) lineTo()連接路徑終點到指定的座標中
(4) stroke()繪製路徑

參閱：MDN-CanvasRenderingContext2D

探索

作者有提到最後可以去加入一個圖片相疊時的效果globalCompositeOperation
還滿有趣的，可以再嘗試看看寫各種效果，或是弄幾個checkbox就可以設定很多畫筆跟效果了！

參閱：CanvasRenderingContext2D.globalCompositeOperation

[DEMO]

BobChochola's Note

JavaScript-Fun-with-HTML5-Canvas-08