JavaScript Academy · 课时

处理图像和文本

Q: 「处理图像和文本」这节课中我会学到什么？

在 Canvas 上绘制图像和样式化文本。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 Canvas 上绘制图像和样式化文本。

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

加载图像

Canvas 从 HTMLImageElement 绘制图像。创建一个 Image，设置它的 src，并等待 onload 后再进行绘制——在此之前像素尚不可用。

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

drawImage 基础

drawImage(img, dx, dy) 会以图像的自然大小，在指定位置绘制图像。

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

缩放图像

五参数形式 drawImage(img, dx, dy, dWidth, dHeight) 会将图像缩放到目标框中。

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

使用源矩形裁剪

九参数形式允许您进行裁剪：drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。前四个参数描述源图像中的切片。

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

绘制填充文本

fillText(text, x, y) 使用 fillStyle 绘制文本。默认情况下，y 表示文本基线。

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

描边文本

strokeText(text, x, y) 只使用 strokeStyle 和 lineWidth 绘制文本轮廓。

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

font 属性

font 遵循 CSS 简写格式：[style] [weight] size family。大小和字体系列是必需的。

ctx.font = "italic bold 28px Georgia, serif";

文本对齐

textAlign（start/end/left/right/center）设置水平方向的锚点；textBaseline（top/middle/alphabetic/bottom）设置给定点周围的垂直锚点。

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

测量文本

measureText(text) 返回一个 TextMetrics 对象。其中的 width 会告诉您文本渲染后的宽度，这对布局和换行至关重要。

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

简单的文本换行

将 measureText 与循环结合起来，就可以将较长的字符串换到多行。

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

使用阴影增加深度

阴影属性适用于形状、图像和文本：shadowColor、shadowBlur、shadowOffsetX/Y。

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

快速检查

测试您对图像和文本绘制的理解。

回顾：图像和文本

您已经学会加载图像，并通过 drawImage 对其进行缩放和裁剪；使用 fillText/strokeText 渲染文本；设置 font；对齐文本；使用 measureText 测量宽度；以及添加阴影。接下来将学习动画。

常见问题解答

「处理图像和文本」课时是免费的吗？

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

「处理图像和文本」这节课中我会学到什么？

在 Canvas 上绘制图像和样式化文本。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「处理图像和文本」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy