81. Canvas 入门：画布基础

本节目标：理解 Canvas 是什么，学会在页面中放置画布并绘制第一个图形。

Canvas 是 HTML5 引入的一个画布元素。它本身只是一张”白纸”，需要配合 JavaScript 在上面画画。做游戏、搞数据可视化、处理图片，都少不了它。

放置画布

在页面中添加一个 canvas 元素：

<canvas id="myCanvas" width="400" height="300"></canvas>

width 和 height 设置画布的像素尺寸。注意这里用的是标签属性，不是 CSS 样式。用 CSS 设置宽高会导致画面拉伸变形。

Tip
如果浏览器不支持 canvas，可以写兜底内容：
<canvas id="myCanvas" width="400" height="300">
  你的浏览器不支持 Canvas，请升级浏览器。
</canvas>

获取绘图上下文

Canvas 元素只是容器，真正画画需要获取”绘图上下文”（Context）。最常用的是 2D 上下文。

// 1. 获取 canvas 元素
const canvas = document.getElementById('myCanvas');

// 2. 获取 2D 绘图上下文
const ctx = canvas.getContext('2d');

有了 ctx 对象，就可以调用各种绘图方法了。

坐标系

Canvas 的坐标系和数学课上的不太一样：

原点在左上角
X 轴向右递增
Y 轴向下递增

(0,0) ──────────→ X
  │
  │
  │
  ↓
  Y

绘制第一个图形：矩形

ctx.fillRect(x, y, width, height) 绘制一个填充矩形。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';       // 设置填充颜色
ctx.fillRect(50, 50, 100, 80); // 在 (50,50) 画一个 100x80 的矩形

保存为 HTML 文件，打开就能看到蓝色矩形。

绘制空心矩形

strokeRect 画空心矩形，只有边框：

ctx.strokeStyle = 'red';       // 边框颜色
ctx.lineWidth = 3;             // 边框宽度
ctx.strokeRect(50, 50, 100, 80);

清除区域

clearRect 可以清除指定区域的画面：

ctx.clearRect(60, 60, 50, 50); // 清除中间一块，变成"镂空"效果

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Canvas 入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300"></canvas>
  
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // 画一个蓝色填充矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 80);
    
    // 画一个红色边框矩形
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.strokeRect(200, 50, 100, 80);
  </script>
</body>
</html>

Canvas vs SVG

Canvas 和 SVG 都能在网页上画图，但思路完全不同：

对比项	Canvas	SVG
类型	位图（像素）	矢量图
操控方式	JavaScript	XML 标签
缩放	会失真	无限缩放不失真
适合场景	游戏、大量像素操作	图标、图表
DOM 节点	只有一个 canvas	每个图形都是独立节点

Note

选择哪个取决于场景。需要大量动画和像素级操作用 Canvas，需要清晰缩放和独立交互用 SVG。

小结

<canvas> 是 HTML5 的画布元素
通过 getContext('2d') 获取 2D 绘图上下文
fillRect 画填充矩形，strokeRect 画空心矩形
坐标系原点在左上角，Y 轴向下
Canvas 是位图，缩放会失真