JS30 Day08
使用 Canvas,在網頁上自由地畫圖吧!


Fun with HTML5 Canvas

完成目標

  • 功能
    • 可以畫圖的畫布
    • 粗細、顏色變化
  • 畫面
    • 邊畫邊換色、粗細
    • 停下來,再繼續畫,粗細和顏色與上次停筆相同



index-START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
</script>

<style>
html, body {
margin: 0;
}
</style>

</body>
</html>

index-FINISHED.html

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
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;
// ctx.globalCompositeOperation = 'multiply';

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;

function draw(e) {
if (!isDrawing) return; // stop the fn from running when they are not moused down
console.log(e);
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
// start from
ctx.moveTo(lastX, lastY);
// go to
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];

hue++;
if (hue >= 360) {
hue = 0;
}
if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
direction = !direction;
}

if(direction) {
ctx.lineWidth++;
} else {
ctx.lineWidth--;
}

}

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


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

</script>

<style>
html, body {
margin: 0;
}
</style>

</body>
</html>



學習筆記


★ < canvas > 標籤

<canvas> 標籤為圖形容器,需透過 Script 來繪製。可以在 HTML 頁面中使用多個 <canvas> 標籤。

範例:

1
2
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

*注意:標籤通常需要指定一個 id 屬性, width 和 height 屬性定義的畫布的大小。


canvas 相關函式
  • canvas.getContext() :製作一個用於在畫布上繪圖的環境。

    參數指定了在畫布上繪製的類型。當前唯一的合法值是”2d”,它指定了二維繪圖,並且返回一個環境物件,導出一個二維繪圖 API。如果未來 <canvas> 標籤擴展到支持 3d 繪圖,getContext() 方法可能允許傳遞一個”3d”參數。


  • canvas.width / canvas.height:設置 canvas 的大小。

    設置 canvas 大小的幾種方法:

    *注意:canvas 的預設大小為寬 300px / 高 150px,使用某些方法設置 canvas 大小會導致圖形拉伸變形。

    • 不會變形的方法

      • 直接在標籤中設置:
      1
      <canvas width="500" height="500"></canvas>
      • 使用 HTML Canvas API 設定 Style:
      1
      2
      3
      let canvas = document.getElementById("canvasId");
      canvas.width = 500;
      canvas.width = 500;
    • 會變形的方法

      • 使用 CSS:
      1
      2
      3
      4
      #canvasId
      width:500px;
      height:500px;

      • 使用 HTML5 Canvas API 設定 Style:
      1
      2
      3
      let canvas = document.getElementById("canvasId");
      canvas.style.width = "500px";
      canvas.style.height = "500px";
      • 用 jQuery的 $(“#id”).width(500);

    可以參考這篇:https://blog.csdn.net/chy555chy/article/details/53977575


  • CanvasRenderingContext2D 介面:

    使用於繪製矩形、文字、影像以及其它基於 canvas 元素的物件。此介面提供了繪製 canvas 元素外觀的 2D 渲染環境。

    • ctx.strokeStyle: 筆觸的顏色、漸變或模式。預設為 #000 (black)。
    • ctx.lineJoin:兩條線相交時,所創建的轉角類型。預設為 miter。
    • ctx.lineCap:線條的結束端點樣式。預設為 butt。
    • ctx.beginPath():起始一條路徑,或重置當前路徑。
    • ctx.moveTo():把路徑移動到畫布中的指定點,不創建線條。

    更多方法:https://www.w3school.com.cn/tags/html_ref_canvas.asp


★ window.innerWidth

window.innerWidthwindow.innerHeight 屬性返回瀏覽器視窗內的網頁內容寬、高。

語法:

1
2
3
4
5
6
7
// Get
window.innerWidth
window.innerHeight

// Set
window.innerWidth = pixels
window.innerHeight = pixels

window.outerWidthwindow.outerHeight 的差異:

  • window.innerWidthwindow.innerHeight :不包含工具列、捲軸
  • window.outerWidthwindow.outerHeight :包含工具列、捲軸