Canvas画布，就是可以用来画画的地方，不是用户在浏览器上画图，而是会javascript画图。这区别于直接载入一张图片，是可以根据需要进行绘制。
HTML <canvas> 元素用于通过脚本（通常是 JavaScript）动态地绘制图形。
<canvas> 元素只是图形的容器。您必须使用脚本来绘制实际的图形。
Canvas 有多种方法用于绘制路径、方框、圆形、文本和添加图像。
Canvas 可以绘制彩色文本，还可带动画效果。
Canvas 拥有使用图形和图表进行图形化数据呈现的强大能力。
Canvas 对象可以移动。一切皆有可能：从简单的弹跳球到复杂的动画。
Canvas 可以响应 JavaScript 事件。
Canvas 可以响应任何用户操作（按键单击、鼠标单击、按钮单击、手指移动）。
HTML Canvas 可用于游戏
Canvas 的动画方法为 HTML 游戏应用程序提供了很多可能性。
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas> 元素必须有 id 属性，以便 JavaScript 可以引用它。
width 和 height 属性对于定义画布的大小也是必需的。
提示：一张 HTML 页面上可以有多个 元素。
默认情况下， 元素没有边框，也没有内容。
如需添加边框，请使用 style 属性：
<!DOCTYPE html>
<html lang="zh-cn">
<title>编程笔记 html5&css&js HTML Canvas</title>
<meta charset="utf-8" />
<style>
body {
color: cyan;
background-color: teal;
}
.container {
width: 500px; /* 设置容器的宽度 */
margin: 0 auto; /* 将左右边距设置为自动 */
line-height: 2;
}
</style>
<body>
<div class="container">
<h1>这是一个 canvas</h1>
<canvas
id="myCanvas"
width="500"
height="500"
style="border: 1px solid #000000"
></canvas>
</div>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(100, 100, 300, 300);
ctx.stroke();
ctx.fillStyle = "#00FF00";
ctx.fillRect(150, 150, 200, 200);
</script>
</body>
</html>
暂时用不到，再说吧。