0Pricing
JavaScript Academy · 课时

设置 Canvas 上下文

获取并配置 2D 渲染上下文。

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

什么是 Canvas 接口

Canvas 接口允许您使用 JavaScript 在 <canvas> 元素上绘制二维图形。您会获得一个由像素组成的绘图表面，以及一组用于绘制形状、图像和文本的命令。

  • 标记只需要一个 <canvas> 标签。
  • 所有绘图都通过一个上下文对象在 JavaScript 中完成。
<canvas id="board" width="320" height="200"></canvas>

获取上下文

在画布元素上调用 getContext('2d')，即可获得一个 CanvasRenderingContext2D。每条绘图命令都通过这个对象执行。

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

坐标系

原点 (0, 0) 位于左上角。X 向右增长，Y 向下增长。一个 320x200 的画布，其右下角位于 (320, 200)。

宽度和高度属性

width 和 height HTML 属性以像素为单位设置绘图缓冲区的大小。如果省略，默认值为 300x150。在 JS 中设置它们也会清除画布。

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSS 大小与缓冲区大小

CSS width/height 会拉伸画布在屏幕上的显示效果，但 NOT 会改变像素缓冲区。如果它们与属性值不同，绘图看起来会模糊或变形。请让两者保持同步，以获得清晰的输出。

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

处理高 DPI 屏幕

在 Retina 显示屏上，devicePixelRatio 通常为 2。请放大缓冲区并缩小上下文，这样线条才能保持清晰。

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

设置填充和描边样式

绘图状态保存在上下文中。fillStyle 设置填充颜色，strokeStyle 设置轮廓颜色。它们接受任何 CSS 颜色字符串。

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

您的第一个绘图

准备好上下文后，您就可以立即绘图。fillRect(x, y, w, h) 使用当前的 fillStyle 绘制一个填充矩形。

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

清除画布

clearRect(x, y, w, h) 会将矩形区域擦除为透明状态。清除整个缓冲区通常是每个动画帧的第一步。

ctx.clearRect(0, 0, canvas.width, canvas.height);

保存和恢复状态

save() 将当前样式/变换压入堆栈；restore() 将其弹出并恢复。这样可以隔离临时修改。

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

功能检测

使用前检查是否存在 getContext，以兼容非常老旧的浏览器。

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

快速检查

测试您对画布设置的理解。

回顾：画布设置

您已经学会：获取画布、调用 getContext('2d')、理解左上角原点、设置缓冲区大小与 CSS 大小、使用 devicePixelRatio 处理高 DPI，以及配置 fillStyle/strokeStyle。接下来将学习绘制形状和路径。

常见问题解答

「设置 Canvas 上下文」课时是免费的吗？

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

「设置 Canvas 上下文」这节课中我会学到什么？

获取并配置 2D 渲染上下文。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「设置 Canvas 上下文」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 设置 Canvas 上下文
  2. 绘制形状和路径
  3. 处理图像和文本
  4. 使用 requestAnimationFrame 制作动画
← 返回 JavaScript Academy