正在加载...

HTML Canvas

上一课 SVG 用矢量标记或 .svg 文件放置清晰图标。本课介绍 canvas：由 JavaScript 绘制的空白位图框。HTML 只负责放置与尺寸；脚本绘制像素。范围务实——元素 + 微型二维绘制——不是完整 Canvas API、游戏或 WebGL 课。

为何在 HTML 课学 canvas

初学者在图表与小游戏中见到 canvas。分工很重要：HTML 拥有元素；JS 拥有像素。在 SVG 之后，canvas 展示浏览器里另一种常见绘制工具。这里 getContext("2d") 与 fillRect 就够证明思路。

直接回答

1) 添加带 id、width、height 与回退文本的 canvas。2) 在 JS 中调用 getContext("2d")。3) 用 fillStyle + fillRect 绘制。4) 属性设定位图分辨率。5) 图标用 SVG；动态像素用 canvas。6) 仅为入门。

📊 Canvas vs SVG for beginners

Topic Canvas SVG
Drawing model Bitmap pixels via JavaScript Vector shapes in markup (or .svg file)
Who paints Scripts on a 2d (or other) context Browser renders SVG tree
Best beginner fit Dynamic charts, games, freehand Icons, logos, sharp UI marks
Scales when resized Can blur if only CSS-stretched Stays sharp as vectors
Accessible naming Label the canvas; drawings are pixels alt / aria-label on meaningful graphics
This course depth Element + tiny 2d draw Embed inline or via img

微型 canvas 元素

没有脚本时 canvas 是空矩形。HTML 声明尺寸与 id，方便脚本查找。

Canvas shell with fallback

html 
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>

阅读外壳

  • canvas 创建绘制表面
  • width/height 设定位图尺寸
  • id 便于选取
  • 标签间文本是回退
  • 仅用 CSS 拉伸可能模糊
  • 与 SVG 不同，HTML 中没有子形状

用二维上下文画矩形

短脚本上色。getContext("2d") 返回 2D API；fillRect 填充矩形。

Canvas plus fillRect

html 
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>

阅读绘制调用

  • getElementById 找到 canvas
  • getContext("2d") 打开 API
  • fillStyle 设定颜色
  • fillRect 填充矩形
  • 无脚本仅见回退
  • 下一课：web storage

选择 canvas 还是 SVG

  • 静态清晰标志：SVG
  • 频繁更新的像素：canvas
  • 需要作为 DOM 的形状：常选 SVG
  • 按像素区域涂色：canvas
  • 简单徽章：通常 SVG 更省事
  • WebGL/完整游戏：超出本入门

练习 — 页面上的 canvas

  1. 粘贴外壳。
  2. 添加脚本并确认矩形。
  3. 改颜色与数字。
  4. 暂时去掉脚本。
  5. 仅用 CSS 拉伸——可能模糊。
  6. 一句话：canvas 是 JS 位图；SVG 是矢量标记。
  7. 预告：web storage。

易错点

  • 指望仅靠 HTML 出形状
  • 忘记回退文本
  • 用 canvas 做更适合 SVG 的标志
  • 把 canvas 与 SVG 混淆
  • 只改 CSS 尺寸
  • 把入门当完整 Canvas 课
  • 有意义时不给 canvas 命名

小结

  • canvas 是空白位图表面
  • JavaScript 用 getContext("2d") 与 fillRect 绘制
  • 图标用 SVG；动态像素用 canvas
  • 回退文本在无法绘制时有帮助
  • SVG 是矢量；本课是脚本像素
  • 下一课：HTML web storage

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 62 的 68
Html 教程