15、HTML5 Canvas 绘图全解析

HTML5 Canvas 绘图全解析

1. Canvas 绘图基础

在 HTML5 中， <canvas> 元素为我们提供了强大的绘图能力。以下是一个简单的绘制圆形的代码示例：

mycontext.beginPath();
mycontext.arc(35, 35, 10, 0, Math.PI * 2, true); // draw a circle
mycontext.fillStyle = "#f00";
mycontext.fill(); // fill the circle solid

在 Canvas 中，绘图顺序非常重要，因为任何像素的最后一次绘图操作是可见的。这里我们先绘制线条，再绘制圆形。

2. Canvas API 常用命令

Canvas API 提供了一系列常用的绘图命令，如下表所示：
| 命令 | 描述 |
| — | — |
| beginPath() | 开始一个路径段定义，供 stroke() 或 fill() 等渲染操作使用 |
| closePath() | 通过添加一条从路径末尾到路径开头的线段来关闭路径 |
| moveTo(x, y) | 移动下一个相对绘图操作的注册点 |
| lineTo(x, y) | 从当前注册点创建一条到 <