Day8: Fun with HTML5 Canvas

Copy 
1//取得 #draw 元素。
2const canvas = document.querySelector("#draw");
3//getContext 取得context 來繪畫， 2d 代表二維繪圖
4const ctx = canvas.getContext("2d");
5
6//將原本高寬800的canvas設定為window寬高
7canvas.width = window.innerWidth;
8canvas.height = window.innerHeight;
9
10//設定樣式
11ctx.strokeStyle = "#BADA55"; //筆觸顏色
12ctx.lineJoin = "round"; //線條連接樣式
13ctx.lineCap = "round"; //線條結束樣式
14ctx.lineWidth = 100; //線條寬度
15
16//設定參數
17let isDrawing = false; //判斷是否執行畫圖中
18let lastX = 0; //繪畫位置
19let lastY = 0;
20let hue = 0; //顏色，在hsl中使用
21let direction = true; //判斷粗細增減用

Copy 
1function draw(e) {
2  if (!isDrawing) return; //如果沒有執行畫圖就停止
3  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; //顏色
4  ctx.beginPath(); //初始化一條路徑。
5  // start from
6  ctx.moveTo(lastX, lastY); //初始位置
7  // go to
8  ctx.lineTo(e.offsetX, e.offsetY); //連接路徑終點到指定的座標中
9  ctx.stroke(); //繪製路徑
10  [lastX, lastY] = [e.offsetX, e.offsetY]; //把結束點放回 X 和 Y 變數
11
12  hue++;
13  if (hue >= 360) {
14    //當色碼超過360後歸零
15    hue = 0;
16  }
17  //如果筆觸粗細大於等於 50 或 小於等於 1 就反轉
18  if (ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
19    direction = !direction;
20  }
21
22  //// 增加或減少筆觸粗細
23  if (direction) {
24    ctx.lineWidth++;
25  } else {
26    ctx.lineWidth--;
27  }
28}

Copy 
1//mousedown 按下滑鼠按鍵畫的時候，isDrawing = true, 把目前滑鼠的位置設定為變數中的X、Y
2canvas.addEventListener("mousedown", (e) => {
3  isDrawing = true;
4  [lastX, lastY] = [e.offsetX, e.offsetY];
5});
6
7//滑鼠移動中
8canvas.addEventListener("mousemove", draw);
9//放開滑鼠按鍵時
10canvas.addEventListener("mouseup", () => (isDrawing = false));
11//滑鼠移開
12canvas.addEventListener("mouseout", () => (isDrawing = false));