HTML Academy · 课时

在画布上绘制文本和图像

Q: 「在画布上绘制文本和图像」这节课中我会学到什么？

在画布上渲染文本字符串并绘制图像 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在画布上渲染文本字符串并绘制图像

在画布上绘制文本和图像 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

绘制文本

设置字体：ctx.font = "bold 24px sans-serif"。绘制文本：ctx.fillText("Hello", x, y) 或 ctx.strokeText("Hello", x, y)。y 坐标是文本基线——请在其上方加上上伸部高度，才能将文本正确放置在边界框内。

文本对齐

ctx.textAlign 控制水平对齐方式："left"（默认）、"center"、"right"。ctx.textBaseline 控制相对于 y 的垂直对齐方式："top"、"middle"、"alphabetic"（默认）、"bottom"。要使文本居中，请将两者分别设置为 "center" 和 "middle"。

使用 measureText 进行布局

ctx.measureText("text") 返回包含宽度和字体指标的 TextMetrics 对象。您可以用它动态计算文本位置，例如将文本在框中居中、在最大宽度处换行，或将标签右对齐到数据点旁边。

文本换行

画布没有内置的文本换行功能。请自行实现：测量单词宽度，累积宽度直到超过最大宽度，然后按 lineHeight 的间隔换到新行。这是画布渲染库中常见的实用函数。

绘制图像

ctx.drawImage(image, dx, dy) 会在（dx, dy）处绘制 HTML 图像元素、HTML 画布元素或 HTML 视频元素。请先加载图像，并在加载完成处理程序中绘制，以确保绘制前像素已经可用。

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";

缩放图像

ctx.drawImage(image, dx, dy, dw, dh) 会将图像缩放到 dw × dh。系统不会自动保持宽高比，您需要手动计算尺寸。要保持宽高比，请使用：dw = img.width * scale; dh = img.height * scale。

裁剪图像

九参数 drawImage：ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)。源矩形（sx, sy, sw, sh）用于从图像中裁剪区域；目标矩形（dx, dy, dw, dh）用于在画布上放置并缩放裁剪结果。

图像平滑

ctx.imageSmoothingEnabled = false 会在缩放图像时禁用双线性插值。需要清晰、不平滑的缩放效果时可用于像素艺术。对于照片图像，请保持启用状态（默认值），因为平滑缩放效果更好。

将画布作为图像源

将一个画布作为 drawImage 的源，即可将一个画布渲染到另一个画布上。这可以实现离屏渲染：在隐藏画布上绘制复杂的合成图像，然后在每一帧中通过一次操作将该画布绘制到可见画布上。

globalAlpha 与合成

ctx.globalAlpha（0 到 1）会为后续所有绘图应用统一的透明度。ctx.globalCompositeOperation 控制新绘图与现有像素的混合方式，例如“源图覆盖”（默认）、“正片叠底”、“滤色”、“目标图像擦除”（擦除）等。

使用 toDataURL 导出

canvas.toDataURL("image/png") 会将画布导出为 base64 PNG 数据 URL。您可以用它实现用户主动发起的下载：创建锚点元素，将链接地址设置为数据 URL，并将下载属性设置为文件名，然后以编程方式触发点击。

知识检查

绘制文本时，ctx.textBaseline = "middle" 会影响什么？

总结

画布文本渲染使用 ctx.font、fillText/strokeText、textAlign 和 textBaseline 进行定位，并使用 measureText 计算布局。通过 drawImage 绘制图像时支持缩放和裁剪；globalAlpha 和 globalCompositeOperation 控制混合效果。toDataURL 可将画布导出，以便下载或进一步使用。

常见问题解答

「在画布上绘制文本和图像」课时是免费的吗？

是的 — 「在画布上绘制文本和图像」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「在画布上绘制文本和图像」这节课中我会学到什么？

在画布上渲染文本字符串并绘制图像你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「在画布上绘制文本和图像」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy