当清晨的阳光如笔尖般轻轻划过窗台，泡一杯温润的金骏眉，坐在桌前翻开这篇文章 —— 此刻的学习，就像在网页的 “电子画布” 上从容调色，让 HTML 中<canvas>标签的知识点如晨光般细腻铺展。今天咱们聊聊前端面试中常考的 canvas 绘图问题，用最温柔的方式拆解技术难点，让你在面试准备中感受如晨间微风般的舒缓。

面试题：HTML 中<canvas>标签的核心用途是什么？如何使用 JavaScript 在 canvas 上绘制矩形和文字？兼容性方面需要注意什么？

初次遇到这道题，或许你会在脑海中闪过 “canvas 是用来画画的” 这个模糊概念，但如何系统回答呢？别急，咱们把 canvas 比作网页里的 “电子画布”，一步步解锁它的 “绘画技能”。

一、<canvas>标签：网页中的 “电子画布”

<canvas>标签就像一张透明的 “电子画布”，默认情况下它是空白的，需要通过 JavaScript 在上面绘制图形、文字、动画等内容。它的核心用途包括：

• 数据可视化：绘制折线图、柱状图、饼图等动态图表；
• 游戏开发：实现 2D 游戏场景和交互（如经典的《Flappy Bird》）；
• 图像编辑：对图片进行裁剪、滤镜处理等操作。

<!-- 创建一个canvas画布，默认宽高为300x150像素 -->
<canvas id="myCanvas" width="600" height="300">
您的浏览器不支持canvas功能，请升级浏览器。
</canvas>
<!-- 注释：width和height属性定义画布的像素尺寸，
标签内的文字是不支持canvas时的降级提示 -->

二、绘制矩形：canvas 的 “基础画笔”

在 canvas 上绘制矩形有三种方法：fillRect()（填充矩形）、strokeRect()（描边矩形）、clearRect()（清除矩形区域）。咱们以绘制一个带边框的橙色矩形为例：

// 获取canvas元素和绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取2D绘图上下文，这是绘图的“笔”
// 绘制描边矩形（空心矩形）
ctx.strokeStyle = '#FF6B6B'; // 设置边框颜色为橙色
ctx.lineWidth = 3; // 设置边框宽度为3像素
ctx.strokeRect(50, 50, 200, 100); // 绘制起点(50,50)，宽200，高100的矩形边框
// 绘制填充矩形（实心矩形）
ctx.fillStyle = '#FFE0B2'; // 设置填充颜色为浅橙色
ctx.fillRect(50, 50, 200, 100); // 绘制起点(50,50)，宽200，高100的实心矩形

代码拆解：

• getContext('2d')是关键一步，就像拿起一支 2D 画笔，没有它就无法在 canvas 上作画；
• strokeStyle和fillStyle分别控制边框和填充的颜色，就像给画笔蘸上不同颜色的颜料；
• strokeRect()和fillRect()的前两个参数是矩形左上角的坐标，后两个是宽和高，就像在画布上量好位置再下笔。

三、绘制文字：给画布 “添砖加瓦”

在 canvas 上绘制文字需要设置字体、对齐方式等样式，以绘制居中的标题文字为例：

// 设置文字样式
ctx.font = '24px Arial'; // 设置字体为24像素Arial
ctx.fillStyle = '#333'; // 设置文字颜色为深灰色
ctx.textAlign = 'center'; // 设置文字水平居中
ctx.textBaseline = 'middle'; // 设置文字垂直居中
// 绘制文字
ctx.fillText('前端绘图小课堂', canvas.width/2, canvas.height/2);
// 在画布中心坐标(宽度/2, 高度/2)处绘制文字

代码拆解：

• font属性必须包含字体大小和字体名称，就像选择合适的字号和字体风格；
• textAlign和textBaseline确保文字居中显示，避免 “写歪”；
• fillText()的前两个参数是文字内容和坐标，第三个参数（可选）是最大宽度，防止文字溢出。

四、兼容性处理：让 “画布” 兼容所有浏览器

虽然 canvas 在现代浏览器中支持良好，但仍需注意：

1. IE9 以下兼容：这些老旧浏览器不支持 canvas，需通过<canvas>标签内的文字提示用户升级，或使用Modernizr库检测兼容性并提供替代方案（如 Flash fallback）。
2. 视网膜屏适配：通过 CSS 设置width/height和 JavaScript 设置canvas.style.width/height，解决高清屏像素模糊问题：

/* CSS */
#myCanvas {
width: 600px;
height: 300px;
/* 视网膜屏优化 */
transform: scale(2);
transform-origin: top left;
}

/* JavaScript */
canvas.width = 1200; // 实际绘图尺寸放大2倍
canvas.height = 600;

面试回答范本

正常回答方法

“<canvas>标签是 HTML5 中用于图形绘制的核心容器，主要用于实现数据可视化、2D 游戏开发和图像编辑等场景。绘制矩形需通过getContext('2d')获取绘图上下文，使用fillRect()或strokeRect()方法，配合fillStyle和strokeStyle设置颜色。绘制文字需先通过font、textAlign等属性定义样式，再用fillText()绘制。兼容性方面，需为 IE9 以下浏览器提供降级提示，同时注意视网膜屏的像素适配，通过 CSS 和 JavaScript 配合优化显示效果。”

大白话回答方法

“面试官您好！<canvas>就像网页里的一张‘电子白纸’，专门用来画画、做图表或者小游戏。比如画矩形，得先拿‘画笔’（getContext('2d')），然后选颜色（fillStyle），再告诉它‘画多大’（fillRect()的宽高）和‘画在哪’（坐标）。画文字的话，要先选字体和大小（font），再找好位置（居中对齐），最后‘写上去’（fillText()）。兼容性方面，老浏览器可能不支持，得提醒用户升级，而高清屏要注意放大画布，不然画会模糊，就像用粗笔画小字，得调整好比例。”

争议时刻：在 React/Vue 项目中，canvas 该 “原生开发” 还是 “用库替代”？

有人认为：“直接用原生 canvas 代码更轻量，性能更好。”也有人觉得：“使用 Chart.js、Three.js 等库效率更高，封装好的组件能省很多事。”作为每天写代码的前端，你更倾向于哪种方式？来评论区分享你的实战经验，点赞最高的小伙伴送《前端可视化开发实战手册》电子版，一起探讨如何让 “画布” 更高效！