一、定义
- canvas最早是由Apple引入Webkit的，<canvas>元素包含于HTML5中
- HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
二、基本使用（步骤）
①创建canvas元素，向HTML5页面添加canvas元素（准备画布）
②设置画布宽度和高度（默认是白色的，大小默认300*150）
③通过JavaScript来绘制（在什么地方画）
④准备绘制工具（获取上下文，指一种环境）
⑤利用工具绘图（移动画笔，规定轨迹，描边....）
三、体验
①画一条直线
- 关于画布大小的书写位置
- 关于轨迹的理解
- 关于2d的说明
②画两条平行线
- 线条的默认大小和颜色
- 线条模糊的原因
③画三条不同颜色和宽度的平行线
- 颜色
- 宽度
- 解决样式覆盖问题
④绘制一个填充颜色的三角形
- 填充
- 填充颜色
- 起始点和lineto的结束点无法完全闭合（缺角）的解决办法
⑤绘制一个镂空的正方形
- 画法：大正方形顺时针，小正方形逆时针
- 原理：非零环绕填充规则
⑥两端样式和拐点样式
- 两端样式
- 拐点样式
⑦绘制虚线
- 设置虚线的排列方式
- 获取虚线的排列方式
- 虚线偏移量
⑧绘制一个颜色渐变的矩形
⑨绘制折线图
- 绘制网格
- 绘制坐标系
- 绘制点