筆記連結：https://tinyurl.com/iaa-p5
<aside> 💡 Canvas是一個HTML元素，通常用於在網頁上動態繪製圖形、圖像和動畫。與SVG不同，Canvas並不以向量形式保存圖形，而是以像素形式進行繪製。當你在Canvas上繪製圖形時，它會在一個像素網格上創建圖像。因此，與SVG不同，Canvas上的內容無法無損地縮放。
</aside>
<aside> 📢 Flash 是一種由 Adobe 公司擁有的技術，它需要一個插件——Adobe Flash Player，來在網頁上呈現遊戲、動畫和複雜的內容。許多我們喜歡的遊戲是用 Flash 製作的。然而，Flash 並非 HTML/CSS/JS 的一部分，並且在行動裝置上的支援有限，性能效率也不高。
因此，在 2014 年，HTML <canvas> 被發佈出來以取代 Flash 和 swf 檔，同時HTML還進行了其他改變，這些改變被統稱為HTML5。
HTML <canvas>是一個HTML元素，它提供了一個用於在網頁上動態繪製圖形、動畫和遊戲的空白畫布。與Flash相比，<canvas>不需要外部插件，並且更適用於移動設備，因為它是HTML5的一部分，並且可以通過JavaScript來實現豐富的互動和動態內容。它是網頁開發中更現代、更強大的替代方案，同時有助於提高性能和可訪問性。
</aside>
<!DOCTYPE html>
<html>
<head>
<title>SVG Before HTML5</title>
</head>
<body>
<!-- SVG embedded as an external file -->
<embed src="your_flash_file.swf" width="400" height="300" quality="high" bgcolor="#FFFFFF" type="application/x-shockwave-flash">
</body>
</html>
HTML5 引入了直接在HTML文檔中嵌入Canvas的支持。這意味著可以使用**<canvas>**標籤直接放入HTML文檔中。
<!DOCTYPE html>
<html>
<head>
<title>SVG After HTML5</title>
<script src="mySketch.js" defer></script>
</head>
<body>
<!-- Canvas embedded directly within HTML5 using the <canvas> tag -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</body>
</html>
<aside> 🧸 我們之前提過，就像寶可夢遊戲一樣，網頁技術也會改版跟更新，HTML5 指的是 HTML 的第五個主要版本（2014），是一個用於描述網頁結構和內容的標記語言的最新版本。
其中便包含新增 <canvas/> 元素。這個元素需要撰寫 Javascript 才可以控制，以下我們會示範用原生的 Javascript 來操控 <canvas/> 跟用 p5 來操控 <canvas/>。
</aside>