第一章：Canvas基础入门

说实话，每次带新人做Canvas项目，我都会从最基础的东西讲起。因为我自己就吃过亏——刚接触Canvas时，连坐标系都没搞明白，画出来的图形全跑偏了。这一章，咱们就把地基打牢。

1.1 Canvas元素介绍

Canvas，说白了就是HTML5提供的一块「画布」。你可以在上面绘制图形、动画、甚至游戏画面。它不像DOM元素那样有复杂的样式，就是一个矩形区域，等着你用JavaScript去操作。

在HTML里，Canvas就是一个普通的标签：

<canvas id="myCanvas" width="800" height="600">
  您的浏览器不支持Canvas，请升级浏览器。
</canvas>

这里有几个关键点，我当年踩过坑：

  • width和height：这是画布的实际像素尺寸。注意，不是CSS尺寸！
  • id：方便我们用JavaScript获取元素
  • 标签内的文字：当浏览器不支持时显示，现在基本用不上
⚠️ 我曾经犯过的错：用CSS去设置Canvas的宽高，结果画出来的图形模糊不清。记住，Canvas的宽高一定要在标签属性或JavaScript中设置，CSS只是拉伸显示。

1.2 Canvas坐标系

坐标系这个东西，你想想看，是不是所有绘图的基础？Canvas的坐标系和数学里的不太一样。

它的原点(0,0)在左上角：

  • x轴：向右为正方向
  • y轴：向下为正方向

我刚开始做项目时，总习惯用数学坐标系，结果图形全画反了。后来养成了一个习惯：每次画图前，先在脑子里过一遍「左上角是原点，y轴向下」。嗯，这个习惯帮我省了不少调试时间。

坐标系速记表：

方向 坐标变化
向右 x 增加
向左 x 减少
向下 y 增加
向上 y 减少

1.3 获取Canvas上下文

有了画布，怎么在上面画画？你需要一个「画笔」——这就是上下文（Context）。

我个人习惯用getContext('2d')来获取2D绘图上下文：

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

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

// 检查是否获取成功
if (!ctx) {
  console.error('获取上下文失败，请检查浏览器支持');
}

这里有个细节：getContext的参数可以是'2d'、'webgl'等。咱们这个课程主要用2D上下文，WebGL那是3D的内容，后面再说。

💡 我的小技巧：每次获取上下文后，我都会加一个空值检查。因为在一些老旧浏览器或特殊环境下，getContext可能返回null。这个习惯帮我避免过好几次线上bug。

1.4 绘制第一个矩形

好了，现在画布有了，画笔也有了，咱们来画第一个图形——矩形。

Canvas提供了三个绘制矩形的方法：

  • fillRect(x, y, width, height)：绘制填充矩形
  • strokeRect(x, y, width, height)：绘制边框矩形
  • clearRect(x, y, width, height)：清除矩形区域

来看个完整的例子：

// 获取Canvas和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个填充矩形
ctx.fillStyle = '#3498db';  // 设置填充颜色
ctx.fillRect(50, 50, 200, 150);  // 从(50,50)开始，宽200，高150

// 绘制一个边框矩形
ctx.strokeStyle = '#e74c3c';  // 设置边框颜色
ctx.lineWidth = 3;  // 设置边框宽度
ctx.strokeRect(300, 50, 200, 150);

// 清除部分区域
ctx.clearRect(100, 80, 100, 90);  // 在填充矩形上挖个洞

为什么会先讲矩形？因为矩形是Canvas里最简单的图形，也是很多复杂图形的基础。我记得第一次用Canvas做数据可视化时，柱状图就是靠一个个fillRect堆出来的。

参数说明：

参数 含义 示例值
x 矩形左上角的x坐标 50
y 矩形左上角的y坐标 50
width 矩形的宽度 200
height 矩形的高度 150

⚠️ 注意：坐标(x,y)指的是矩形左上角的位置，不是中心点。我见过不少新手把坐标当成中心点来用，结果矩形位置全偏了。

好了，这一章的内容就这些。你想想看，是不是挺简单的？Canvas元素、坐标系、上下文、矩形绘制，这四个知识点串起来，你就已经能在页面上画出东西了。

下一章咱们会深入聊聊路径绘制和样式设置，到时候就能画出更复杂的图形了。记住，基础打牢了，后面才能飞得起来。

← 上一章 📖 返回目录 下一章 →