大白话描述标签的主要用途，如何在其上绘制简单图形？
<canvas> 标签的主要用途
<canvas> 标签是 HTML5 中新增的一个标签，它就像是一块“画布”，你可以在网页上用它来绘制各种图形、动画、制作游戏等。简单来说，它给你提供了一个可以自由发挥创作的空间，让你在网页上画出你想要的东西。
如何在 <canvas> 上绘制简单图形
下面我们来详细介绍如何在 <canvas> 上绘制简单图形，这里以绘制一个矩形和一个圆形为例。
示例代码
<!DOCTYPE html>
<html lang="en"><head><!-- 设置文档的字符编码为 UTF-8 --><meta charset="UTF-8"><!-- 设置页面在移动设备上的显示方式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页的标题 --><title>Canvas 绘图示例</title>
</head><body><!-- 创建一个 canvas 元素，宽为 400 像素，高为 300 像素 --><canvas id="myCanvas" width="400" height="300"></canvas><script>// 获取 canvas 元素const canvas = document.getElementById('myCanvas');// 获取 2D 绘图上下文，这就像是拿到了画笔和颜料const ctx = canvas.getContext('2d');// 绘制一个矩形// 设置填充颜色为蓝色ctx.fillStyle = 'blue';// 绘制一个填充矩形，起始坐标为 (50, 50)，宽为 200 像素，高为 100 像素ctx.fillRect(50, 50, 200, 100);// 绘制一个圆形// 开始一个新的路径，就像是准备开始画新的图形ctx.beginPath();// 设置圆形的圆心坐标为 (300, 200)，半径为 50 像素，起始角度为 0，结束角度为 2π（表示一个完整的圆）ctx.arc(300, 200, 50, 0, 2 * Math.PI);// 设置填充颜色为红色ctx.fillStyle = 'red';// 填充圆形ctx.fill();// 关闭路径ctx.closePath();</script>
</body></html>
代码解释
-
HTML 部分：
<canvas>标签创建了一个画布，id属性用于在 JavaScript 中引用这个画布，width和height属性分别设置了画布的宽度和高度。
-
JavaScript 部分：
document.getElementById('myCanvas')：通过id获取到<canvas>元素。canvas.getContext('2d')：获取 2D 绘图上下文，这是一个对象，包含了各种绘图方法和属性。ctx.fillStyle：设置填充颜色。ctx.fillRect(x, y, width, height)：绘制一个填充矩形，x和y是矩形左上角的坐标，width和height分别是矩形的宽度和高度。ctx.beginPath()：开始一个新的路径，用于绘制新的图形。ctx.arc(x, y, radius, startAngle, endAngle)：绘制一个圆弧或圆形，x和y是圆心的坐标，radius是半径，startAngle和endAngle分别是起始角度和结束角度。ctx.fill()：填充当前路径。ctx.closePath()：关闭当前路径。
)
)
