HTML5 Canvas

Canvas 是 HTML5 新增的"画布"元素，配合 JavaScript 就能在网页上动态绘制图形、图表甚至小游戏。这节课从"画一条线"开始，把 Canvas 的完整用法讲清楚。

什么是 Canvas

<canvas> 本身只是一块矩形空白区域，真正画图靠 JavaScript 调用绘图 API。第一步是拿到"画笔"——2D 绘图上下文：

<canvas id="myCanvas" width="300" height="150"
style="border:1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");  // 找到画布
var ctx = canvas.getContext("2d");                 // 获取 2D 上下文
</script>

在浏览器中显示为：一块带灰色边框的 300×150 空白画布。

坐标系统

Canvas 采用屏幕坐标系：原点 (0,0) 位于左上角，x 轴向右、y 轴向下。画任何图形之前，都要先在脑子里定位好坐标。

常用绘制方法

• 矩形：fillRect(x, y, w, h) 画填充矩形，strokeRect() 画描边矩形，clearRect() 擦除一块区域。
• 颜色与线宽：ctx.fillStyle 设置填充色，ctx.strokeStyle 设置描边色，ctx.lineWidth 设置线宽。
• 线段与路径：beginPath() 开始新路径，moveTo() 移动笔尖，lineTo() 画线，最后 stroke() 描边。
• 圆与圆弧：ctx.arc(x, y, r, 起始角, 结束角)，注意角度单位是弧度。
• 文字：ctx.font 设置字体，fillText(text, x, y) 在指定位置绘制文字。

画一个矩形和一条对角线：

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF6600";       // 填充色：橙色
ctx.fillRect(20, 20, 120, 80);   // 画橙色矩形
ctx.beginPath();                 // 开始新路径
ctx.moveTo(0, 0);                // 笔尖移到左上角
ctx.lineTo(200, 100);            // 画线到右下角方向
ctx.strokeStyle = "#0000FF";     // 描边色：蓝色
ctx.lineWidth = 3;               // 线宽 3 像素
ctx.stroke();                    // 描边，线条才真正显示
</script>

在浏览器中显示为：左上角一个橙色矩形，外加一条从左上到右下的蓝色斜线。

易错点

• getContext 大小写敏感，写错会返回 null，后续调用全部报错。
• 想改画布大小要设置 width/height 属性；用 CSS 拉伸会导致图形模糊。
• 圆弧的角度单位是弧度，画整圆应写 ctx.arc(x, y, r, 0, Math.PI * 2)。
• 做动画时先 clearRect 整块擦除再重绘，否则画面会残留残影。

小结：Canvas = 画布元素 + 2D 上下文 + 绘图方法；先掌握坐标、颜色、矩形与路径这四件事，再学圆弧、渐变和动画就是水到渠成。