前端Wiki/HTML5/进阶/Canvas 绘图

canvas 基础与坐标系

<canvas> 是一张可以用 JS 任意作画的"画布"。它默认 300×150 像素，实际尺寸用 HTML 属性 width/height 设置。关键细节：如果只用 CSS 拉伸 canvas，画布分辨率不变、内容被拉糊——"清晰度"由属性决定，"显示大小"由 CSS 决定，两者通常保持一致。

画布本身没有绘制能力，要通过 getContext('2d') 拿到绘图上下文对象（习惯命名 ctx），所有绘制方法都挂在它上面。canvas 标签内的文字是降级内容，仅在浏览器不支持时显示。

坐标系与数学课不同：原点在左上角，x 向右增大，y 向下增大。画图时脑中要翻转一下"上"和"下"，比如 y=0 是顶部而不是底部。不支持 canvas 的环境会显示标签内的降级文字，正式项目常配合特性检测给替代内容。

本节要点canvas 尺寸由 width/height 属性决定，CSS 只管显示大小，混用会糊；getContext('2d') 拿画笔；原点在左上角、y 轴向下。

HTML

<canvas id="cv" width="400" height="200">您的浏览器不支持 Canvas</canvas>
<script>
  var cv = document.getElementById('cv');
  var ctx = cv.getContext('2d');      // 获取 2D 绘图上下文

  // 坐标系：原点在左上角，x 向右、y 向下
  ctx.fillRect(20, 10, 100, 50);      // 在 (20,10) 画 100x50 矩形
  ctx.fillRect(200, 150, 50, 50);     // y 越大越靠"下"

  // 属性宽高决定分辨率：cv.width=400
  // 若用 CSS 强行放大画布，内容会被拉伸变模糊
</script>

🔗 相关词条canvas HTML CSS 浏览器 JS 标签

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读