当清晨的阳光透过窗户，在桌面上洒下斑驳光影，泡一杯醇香的咖啡，翻开这篇文章。别把它当作枯燥的学习任务，就当作一场悠闲的知识之旅。今天，我们一起来聊聊 HTML 中神奇的canvas标签，那些面试时看似复杂的问题，在这宁静的氛围里，都会变得清晰易懂。

HTML 中的<canvas>标签有什么作用？如何使用它绘制简单图形？

初次听到<canvas>标签，可能会觉得它有些神秘，甚至在面试时一碰到相关问题就心里发慌。别担心，咱们把<canvas>想象成网页上的一块 “空白画布”，你可以在上面随心所欲地绘制各种图形，就像画家在纸上创作一样。

<canvas>标签：网页上的 “魔法画布”

<canvas>标签就像是网页世界里的一块 “魔法画布”，有了它，我们就能在网页上绘制图形、制作动画，甚至实现一些有趣的互动效果。

<!-- 创建一个canvas画布，设置宽高为300像素×300像素 -->
<canvas id="myCanvas" width="300" height="300"></canvas>
<!-- 注释：通过id属性为canvas指定唯一标识，方便后续JavaScript操作，
width和height属性设置画布的宽度和高度，单位为像素 -->

上面这段代码，就像是在网页上放置了一块空白的画布，不过此时它还是空空如也，接下来我们要用 JavaScript 在这块画布上 “挥毫泼墨”。

使用 JavaScript 在<canvas>上绘制图形

在绘制图形之前，我们需要先获取到<canvas>元素，并获取它的 2D 绘图上下文，这就像是拿起画笔准备开始创作。

// 获取canvas元素
const canvas = document.getElementById('myCanvas');
// 获取2D绘图上下文，相当于拿到了画笔
const ctx = canvas.getContext('2d');
// 绘制一个红色的矩形
ctx.fillStyle ='red'; // 设置填充颜色为红色
ctx.fillRect(50, 50, 200, 150); // 绘制矩形，参数分别为x坐标、y坐标、宽度、高度
// 注释：fillStyle属性设置图形的填充颜色，
// fillRect方法用于绘制填充矩形，
// 前两个参数指定矩形左上角在画布上的位置，后两个参数指定矩形的宽和高

除了绘制矩形，我们还可以绘制圆形。绘制圆形需要用到arc方法，它可以帮助我们画出各种弧度的图形。

// 绘制一个蓝色的圆形
ctx.beginPath(); // 开始一个新的路径
ctx.arc(150, 150, 80, 0, 2 * Math.PI); // 绘制圆形，参数分别为圆心x坐标、圆心y坐标、半径、起始弧度、结束弧度
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
ctx.fill(); // 填充图形
// 注释：beginPath方法用于开始一个新的绘图路径，
// arc方法用于绘制弧形或圆形，前三个参数确定圆形的位置和大小，
// 后两个参数指定绘制的起始和结束弧度，以弧度为单位，
// fill方法用于填充当前路径形成的图形

面试回答范本

“面试官您好！<canvas>标签就像是网页上的一块空白画布，我们能用它绘制图形、做动画，实现很多有趣的效果。使用的时候，先在 HTML 里创建一个<canvas>元素，设置好宽高，再通过 JavaScript 获取这个元素和它的 2D 绘图上下文。比如要绘制矩形，就用fillRect方法，设置好位置、宽高和填充颜色；要是画圆形，就用arc方法，确定圆心、半径和弧度，再设置填充颜色，最后填充图形。掌握了这些基础方法，就能在这块画布上创作很多有意思的东西啦！”

在网页开发中，<canvas>和 SVG 都能绘制图形，哪个更适合做数据可视化？

有人觉得<canvas>绘制速度快，处理大量数据时性能更好；也有人认为 SVG 是矢量图形，放大缩小不会失真，在展示精确数据和交互方面更有优势。各位前端小伙伴，你在项目中遇到数据可视化需求时，会选择<canvas>还是 SVG 呢？快来评论区分享你的实战经验，一起探讨出最佳方案！